點擊下拉菜單顯示div內容

我真的被困在這一點上。我有一個名爲「Example」的下拉菜單，其中包含2個子菜單「submenu1」和「submenu2」。當點擊其中任何一個時，它將包含將以燈箱樣式顯示的圖像縮略圖。但截至目前，這兩個拇指都顯示出來了，這不是我想要的，因爲最終的網頁將包含數百個圖像。根據下面的代碼，是否有一種方法可以使圖像僅在單擊一個子菜單時出現。由於點擊下拉菜單顯示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 padding：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 color：＃515151; \t font-size：16px; \t display：block; } 。work-nav #filters li a：hover { \t color：＃5892A8; } .work-nav #filters li a.selected { \t color：＃5892A8; } #thumbs { \t margin：0; \t padding：0; \t } – user2875913

#thumbs li { \t list-style-type：none; } .item-thumbs { \t position：relative; \t溢出：隱藏; \t margin-bottom：30px; \t光標：指針; } .item-thumbs a + img { \t width：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：

給你的子菜單的ID

的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'; 
}

編輯：

呼！這花了一段時間..對不起！

看看這個例子：我基本上做了3個版本供你試用。

只需點擊編輯此筆按鈕來檢查代碼！

Example

來源

2013-10-17 08:01:54 Schoening

我似乎無法找到您在java代碼中提供的sumenus的ID名稱。你能否用適當的類和ID重新命名html代碼，以便我有更好的圖片，因爲我有點迷路。 – user2875913

那是因爲你沒有添加它們。這是一個例子。你應該考慮做一些基本的教程。嘗試谷歌：Codeacademy – Schoening

也。它是JavaScript。不是Java。完全不同的語言 – Schoening

點擊下拉菜單顯示div內容

回答

相關問題