jQuery下拉菜單顯示/隱藏點擊

首先，我檢查了與此相關的大多數答案，但我沒有找到任何適合我的答案。jQuery下拉菜單顯示/隱藏點擊

我希望p標籤在點擊時顯示/隱藏。

<aside> 

    <div> 
     <ul> 
      <li class="asideMenu"> <a href="#">Click to Open 1 </a> 
       <p class="subAside"> Uneasy barton seeing remark happen his has. Am possible offering at contempt mr distance stronger an. </p> 
     </li> 
      <li class="asideMenu"><a href="#"> Click to Open 2 </a> 
       <p class="subAside"> Uneasy barton seeing remark happen his has. Am possible offering at contempt mr distance stronger an. </p> 
     </li> 

      <li class="asideMenu"><a href="#"> Click to open 3 </a> 
       <p class="subAside"> Uneasy barton seeing remark happen his has. Am possible offering at contempt mr distance stronger an. </p> 
     </li> 
     </ul>  


    </div> 

</aside>

而jQuery的：目前只適用於這樣的懸停工作

$('div ul li p').hide().removeClass('asideMenu'); 
$('div ul li').hover(
function() { 
    $('p', this).stop().slideDown(500); 
}, 
function() { 
    $('p', this).stop().slideUp(500); 
} 
);

我所嘗試是將「.hover」改爲「點擊」，也包括點擊（'click'，function ...，但我沒有取得任何成功

你能告訴我如何使我現在有完全相同的效果，但'點擊' ，而不是'懸停'？

提前致謝！

來源

2017-10-14 Schemer

您的答案是否有效？如果是，請標記爲已接受，否則請在評論中告訴我們。 – caramba

on.click()只有一個功能參數，以便您可以使用像這樣：

如果你想始終只顯示點擊的元素並隱藏先前打開時都像這樣，別人看到註釋代碼

$('div ul li p').hide().removeClass('asideMenu'); 
 
$('div ul li').on('click', function() { 
 
    $('.subAside').slideUp(); // remove this line to hide/show only on click 
 
    $(this).children('.subAside').slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<aside> 
 

 
    <div> 
 
     <ul> 
 
      <li class="asideMenu"> <a href="#">Click to Open 1 </a> 
 
       <p class="subAside"> Uneasy barton seeing remark happen his has. Am possible offering at contempt mr distance stronger an. </p> 
 
     </li> 
 
      <li class="asideMenu"><a href="#"> Click to Open 2 </a> 
 
       <p class="subAside"> Uneasy barton seeing remark happen his has. Am possible offering at contempt mr distance stronger an. </p> 
 
     </li> 
 

 
      <li class="asideMenu"><a href="#"> Click to open 3 </a> 
 
       <p class="subAside"> Uneasy barton seeing remark happen his has. Am possible offering at contempt mr distance stronger an. </p> 
 
     </li> 
 
     </ul>  
 

 

 
    </div> 
 

 
</aside>

來源

2017-10-14 20:20:53 caramba

試試這個代碼：

$('div ul li p').hide().removeClass('asideMenu'); 
 
$('div ul li').on("click", function() { 
 
    $(this).find("p").slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<aside> 
 

 
    <div> 
 
     <ul> 
 
      <li class="asideMenu"> <a href="#">Click to Open 1 </a> 
 
       <p class="subAside"> Uneasy barton seeing remark happen his has. Am possible offering at contempt mr distance stronger an. </p> 
 
     </li> 
 
      <li class="asideMenu"><a href="#"> Click to Open 2 </a> 
 
       <p class="subAside"> Uneasy barton seeing remark happen his has. Am possible offering at contempt mr distance stronger an. </p> 
 
     </li> 
 

 
      <li class="asideMenu"><a href="#"> Click to open 3 </a> 
 
       <p class="subAside"> Uneasy barton seeing remark happen his has. Am possible offering at contempt mr distance stronger an. </p> 
 
     </li> 
 
     </ul>  
 

 

 
    </div> 
 

 
</aside>

來源

2017-10-14 20:24:18 curveball

jQuery下拉菜單顯示/隱藏點擊

回答

相關問題