顯示jQuery內容的問題.show（）

我在「頂級」<li>上有一個點擊處理程序，我想隱藏<li>以下的所有內容，然後在被點擊的特定<li>以下顯示內容。顯示jQuery內容的問題.show（）

隱藏的作品，但顯示沒有。

$('.menu li').click(function() { 
 
    $('.submenu').hide(); 
 
    var myclass = $('submenu'); 
 
    $(this).show($submenu) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <button>Menu</button> 
 
    <ul class="menu"> 
 
    <li><a href="#">Football</a> 
 
    </li> 
 
    <li><a href="#">cricket</a> 
 
     <ul class="submenu"> 
 
     <li><a href="#">Shane</a> 
 
     </li> 
 
     <li><a href="#">Waqar</a> 
 
     </li> 
 
     <li><a href="#">Waseem</a> 
 
     </li> 
 
     <li><a href="#">Akhtar</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Hockey</a> 
 
    </li> 
 
    <li><a href="#">Baseball</a> 
 
     <ul class="submenu"> 
 
     <li><a href="#">Shane</a> 
 
     </li> 
 
     <li><a href="#">Waqar</a> 
 
     </li> 
 
     <li><a href="#">Waseem</a> 
 
     </li> 
 
     <li><a href="#">Akhtar</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <div class="clear"></div> 
 
    </ul> 
 
</div>

來源

2016-01-20 Hafiz

什麼都要你預期的輸出？ –

問題的背景需要給你一個解決方案。請舉例說明你想要達到的目標。 – Dandy

解釋代碼試圖做什麼以及它做了什麼。此外，使代碼成爲可測試片段（使用編輯菜單中的[<>]框）。 –

試試這個。

它隱藏CSS的子菜單。
然後當你點擊列表項時，它切換子菜單。

如果您只希望一次顯示一個子菜單，請取消註釋js中的行。

$('.menu li').has('.submenu').click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).find('.submenu').slideToggle(); 
 
});

.submenu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <button>Menu</button> 
 
    <ul class="menu"> 
 
    <li><a href="#">Football</a></li> 
 
    <li><a href="#">cricket</a> 
 
     <ul class="submenu"> 
 
     <li><a href="#">Shane</a></li> 
 
     <li><a href="#">Waqar</a></li> 
 
     <li><a href="#">Waseem</a></li> 
 
     <li><a href="#">Akhtar</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Hockey</a></li> 
 
    <li><a href="#">Baseball</a> 
 
     <ul class="submenu"> 
 
     <li><a href="#">Shane</a></li> 
 
     <li><a href="#">Waqar</a></li> 
 
     <li><a href="#">Waseem</a></li> 
 
     <li><a href="#">Akhtar</a></li> 
 
     </ul> 
 
    </li> 
 
    <div class="clear"></div> 
 
    </ul> 
 
</div>

來源

2016-01-20 07:44:05 LinkinTED

你應該試試這個。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
     <button>Menu</button> 
 
     <ul class="menu"> 
 
     <li><a href="#">Football</a></li> 
 
     <li><a href="#">cricket</a> 
 
      <ul class="submenu"> 
 
      <li><a href="#">Shane</a></li> 
 
      <li><a href="#">Waqar</a></li> 
 
      <li><a href="#">Waseem</a></li> 
 
      <li><a href="#">Akhtar</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Hockey</a></li> 
 
     <li><a href="#">Baseball</a> 
 
      <ul class="submenu"> 
 
      <li><a href="#">Shane</a></li> 
 
      <li><a href="#">Waqar</a></li> 
 
      <li><a href="#">Waseem</a></li> 
 
      <li><a href="#">Akhtar</a></li> 
 
      </ul> 
 
     </li> 
 
     <div class="clear"></div> 
 
     </ul> 
 
    </div> 
 
    <script type="text/javascript"> 
 
     $('.submenu').hide(); 
 
     $(document).on("click",".menu li",function(){ 
 
      $(this).find('.submenu').slideToggle(); 
 
     }); 
 
     
 
    </script>

來源

2016-01-20 07:46:24

非常感謝你們我幫助你們解決了我的問題解決方案 – Hafiz

@Hafiz歡迎。接受答案，如果它可以幫助你做信用。 –

您正在使用jQuery和有toggle()功能顯示/隱藏切換，並使用類似這樣的

$('.submenu').toggle();

，我定你的腳本不起作用。

$('.menu li').click(function(){ 
    $('.submenu').hide(); 
    $(this).find('.submenu').show(); 
});

Working fiddle

來源

2016-01-20 07:54:18 Mystika

顯示jQuery內容的問題.show（）

回答

相關問題