ul li onclick jquery

Question

<a href="#"></a>をクリックすると、私のサブメニューを表示/非表示したいと思います。ここ はコードの例です：

<ul> 
    <li><a href="www.example.com">Test</a></li> 
    <li><a href="www.example.com">Test</a></li> 
    <li class="submenu"> 
     <a href="#">Test 2</a> 
     <ul class="ul_submenu"> 
      <li><a href="www.example.com">Test</a></li> 
      <li><a href="www.example.com">Test</a></li> 
      <li class="submenu_2"> 
       <a href="#">Test 3</a> 
       <ul class="ul_submenu_2"> 
        <li><a href="www.example.com">Test</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

$('li.submenu a[href="#"]').click(function(e) { 
    e.preventDefault(); 
    $("ul.ul_submenu").css("display","block"); 
}, function() { 
    $("ul.ul_submenu").css("display","none"); 
}); 

あなたはJSFiddleを見つけることができます。

子要素がある場合はタグをクリックし、liの表示を変更する必要があります。しかし、ユーザーが次のようなタグをクリックしたときにページのリロードをキャンセルする必要があります。<a href="#"></a>

Answer 1

あなたが行うことができ、

$('li a').click(function(e) { 
    e.preventDefault(); 
    $(this).closest("li").find("[class^='ul_submenu']").slideToggle(); 
}); 

Fiddle

Answer 2

toggleは同じ機能を使用できます。

$(document).ready(function(){ 
    $('li.submenu a[href="#"]').click(function(){ 
     $("ul.ul_submenu").toggle(); 
    }); 
}); 

Answer 3

クリックコールバックでfalseを返すだけです。 click()には2つではなく、1つのコールバック関数しかありません。あなたの計画は何でしたか？

css()を使用する必要はありません。show()を使用してください。

$(function() { 
    $('li.submenu a[href="#"]').click(function(e) { 
     e.preventDefault(); 
     $("ul.ul_submenu").show() 
     return false; 
    }); 
}); 

さらに動的にする必要があります。このように、すべてのメニュー項目に対して。私はあなたのフィドルを編集した：https://jsfiddle.net/sy757gvj/5/

<ul> 
    <li><a href="www.example.com">Test</a></li> 
    <li><a href="www.example.com">Test</a></li> 
    <li class="submenu"><a href="#">Test 2</a> 
    <ul class="ul_submenu"> 
     <li><a href="www.example.com">Test</a></li> 
     <li><a href="www.example.com">Test</a></li> 
     <li class="submenu"><a href="#">Test 3</a> 
     <ul class="ul_submenu"> 
      <li><a href="www.example.com">Test</a></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

-

​​

Answer 4

をこのコードは、 "Test2を" サブメニューが開きます：

を

$('li.submenu a[href="#"]').click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).parent().children("ul.ul_submenu").show(); 
 
});

.ul_submenu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="www.example.com">Test</a></li> 
 
    <li><a href="www.example.com">Test</a></li> 
 
    <li class="submenu"><a href="#">Test 2</a> 
 
    <ul class="ul_submenu"> 
 
     <li><a href="www.example.com">Test</a></li> 
 
     <li><a href="www.example.com">Test</a></li> 
 
     <li class="submenu_2"><a href="#">Test 3</a> 
 
     <ul class="ul_submenu_2"> 
 
      <li><a href="www.example.com">Test</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 5

私はこれにあなたのjQueryを変更：

$('li.submenu').on('click','a[href="#"]',function(e){ e.preventDefault(); $("ul.ul_submenu").toggle(); })

、動作しているようです。 フィドル：https://jsfiddle.net/y0p13dt7/1/