Показать содержимое div на клик по выпадающему меню

Я действительно застрял на этом. У меня есть раскрывающееся меню под названием «Пример», которое содержит 2 подменю «подменю1» и «подменю2». Когда будет нажата одна из двух кнопок, она будет содержать большой палец изображения, который будет отображаться в стиле лайтбоксов. Но на данный момент отображаются оба больших пальца, и это не то, что я хочу, потому что последняя веб-страница будет содержать сотни изображений. Есть ли способ сделать изображения отображаемыми только при нажатии одного подменю в соответствии с приведенным ниже кодом. БлагодаряПоказать содержимое div на клик по выпадающему меню

<!DOCTYPE html> 
<head> 
</head> 
<body>   
<!-- Portfolio Projects --> 
    <div class="row"> 
     <div class="span3"> 
      <!-- Filter --> 
      <nav id="options" class="work-nav"> 
       <ul id="filters" class="option-set" data-option-key="filter"> 
        <li class="type-work">CATEGORIES</li> 
        <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" 
    >BAPTISM 
        <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
        <li class="dropdown-submenu"> 
        <a href="#" class="selected">BOY CLOTHING</a> 
        <ul class="dropdown-menu"> 
        <li><a href="#filter" data-option- 
     value=".boy" tabindex="-1">Clothing</a></li> 
        </ul> 
        </li> 
        <li class="dropdown-submenu"> 
        <a href="#">GIRL CLOTHING</a> 
        <ul class="dropdown-menu"> 
        <li><a href="#filter" data-option- 
       value=".girl" tabindex="-1">Clothing</a></li> 
</ul> 
        </li> 
        </ul> 


        </li> 

</ul> 
    </li> 
     </nav> 
     <script src="http://code.jquery.com/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script>   

       </ul> 
      </nav> 
      <!-- End Filter --> 
     </div> 

     <div class="span9"> 
      <div class="row"> 
       <section id="projects"> 
        <ul id="thumbs"> 

         <!-- gallery starts here --> 

         <li class="item-thumbs span3 boy"><!-- Fancybox - Gallery Enabled  
          - Title - Full Image --> 
<a class="hover-wrap fancybox" data-fancybox-group="boy" 
    title="" href="_include/img/work/full/boy_clothing.jpg"> 
           <span class="overlay-img"></span> 

          </a> 
          <!-- Thumb Image and Description --> 
          <img src="_include/img/work/thumbs/boy_clothing.jpg" alt=""> 
         </li> 
         <li class="item-thumbs span3 girl"> 
          <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
          <a class="hover-wrap fancybox" data-fancybox-group="girl"  
          title="" href="_include/img/work/full/girl_clothing.jpg"> 
<span class="overlay-img"></span> 

          </a> 
          <!-- Thumb Image and Description --> 
        <img src="_include/img/work/thumbs/girl_clothing.jpg" 
alt="">   
         </li> 
        </ul> 
       </section> 

      </div> 
     </div> 
    </div> 
    <!-- End Portfolio Projects --> 




</body> 
</html>

источник

2013-10-13 user2875913

Может быть вы можете показать нам некоторые CSS – JuSchz

. work-nav #filters { \t margin: 0; \t прокладка: 0; \t list-style: none; } .work-nav #filters li { \t padding: 0; \t margin-bottom: 10px; \t margin-left: 0; \t margin-right: 0; \t margin-top: 0; } .work-nav #filters li a { \t цвет: # 515151; \t font-size: 16px; \t дисплей: блок; } .work-nav #filters li a: hover { \t цвет: # 5892A8; } .work-nav # фильтров li a.selected { \t цвет: # 5892A8; } #thumbs { \t margin: 0; \t прокладка: 0; \t } – user2875913

#thumbs li { \t list-style-type: none; } .item-thumbs { \t позиция: относительная; \t переполнение: скрыто; \t margin-bottom: 30px; \t cursor: указатель; } .item-thumbs a + img { \t ширина: 100%; \t } – user2875913

WOW Я не могу поверить, что я нашел решение после стольких дней, добавляя только простое слово. Не нужно было возиться с javascript вообще. На самом деле в внешних .js файла сайта я рассказал разработчик кода, чтобы добавить следующее: фильтра: «» .foobar увидеть окончательный результат ниже $container.isotope({ // options animationEngine: 'best-available', itemSelector : '.item-thumbs', filter: '.foobar', layoutMode : 'fitRows' });

источник

2013-10-17 13:13:37 user2875913

Вот что я хотел бы сделать: Я стараюсь держать логику простой, то вы можете просто использовать что-то подобное на вашем сайте :)

(Пожалуйста SO Поправьте меня, если я ошибаюсь здесь)

CSS:

Дайте подменю идентификатор

JavaScript:

// 2 event listeners that will run a function when the submenu is clicked: 

var sub_menu_1 = document.getElementById("submenu1"); 
sub_menu_1.addEventListener("click", DISPLAY_menu_1 , false); 

var sub_menu_2 = document.getElementById("submenu2"); 
sub_menu_2.addEventListener("click", DISPLAY_menu_1 , false); 

function DISPLAY_menu_1() { 
    // Do whatever CSS you need here, I simply make the entire DIV 'visible': 
    sub_menu_1.style.visibility = 'visible'; 
    // For good measures, lets make submenu2 'invisible': 
    sub_menu_2.style.visibility = 'hidden'; 
} 
function DISPLAY_menu_2() { 
    // Same in Reverse 
    sub_menu_2.style.visibility = 'visible'; 

    sub_menu_1.style.visibility = 'hidden'; 
}

EDIT:

Уф! Это заняло некоторое время ... Простите за это!

Проверьте этот пример: Я в основном сделал 3 версии для вас, чтобы попробовать.

Просто нажмите Редактировать это Pen кнопка, чтобы проверить код!

Example

источник

2013-10-17 08:01:54 Schoening

Хотя я не могу найти идентификатор имени sumenus, предоставленного вами в java-коде. Не могли бы вы переименовать код html с соответствующими классами и идентификаторами, чтобы у меня была лучшая картина, потому что я немного потерян. – user2875913

Это потому, что вы их не добавили. Это пример. Вы должны рассмотреть некоторые базовые учебники. Попробуйте google: Codeacademy – Schoening

Также. Это JavaScript. Не Java. Полностью разные языки – Schoening

Показать содержимое div на клик по выпадающему меню

ответ

Смежные вопросы