0

Webページにいくつかのカテゴリとそのサブカテゴリも表示する必要があります。そこで、nested <ul> <li>タグの形で配置しました。ユーザーがカテゴリの1つをクリックしたときにのみ、すべてのサブカテゴリが表示されるようにする効果が必要です。最初は、サブカテゴリは表示されません。

体の部分で、私はこれをしました

<ul>
   <li class="dropdown">Data mining and data warehousing
      <ul>
           <li>Data mining techniques</li>
           <li>Knowledge discovery</li>
      </ul>
   </li>

    <li class="dropdown">Soft computing and artificial intelligence
       <ul>
            <li>Fuzzy systems</li>
            <li>Neural networks</li>
       </ul>
    </li>
</ul>

cssの部分では、私は

li.dropdown ul {
display : none;
}

そして、htmlページのheadセクションに次のJavascriptスクリプトを追加しました

<script type="text/javascript">
$('li.dropdown').click(function() {
   $(this).children('ul').toggle();
});
</script>

最初は、エフェクトは正常に機能し、すべてのサブカテゴリが非表示になります。ただし、たとえば、をクリックするData mining and data warehousingと、2つのサブカテゴリ（と）も表示されるはずData mining techniquesですKnowledge discovery。

また、他のカテゴリをクリックすると、以前に開いたカテゴリのサブカテゴリが再び折りたたまれます。どうやってやるの ？

4

3 に答える 3

11

したがって、クリックされたもの以外のすべてを非表示にしてから、クリックされたもののliサブカテゴリの表示を切り替えるという考え方です。

$('li.dropdown').click(function() {
   $('li.dropdown').not(this).find('ul').hide();
   $(this).find('ul').toggle();
});

これが例のあるjsFiddleです。

于 2012-11-23T11:48:04.587 に答える
1

次のことを試してください。

$('li.dropdown').click(function() {
   $(this).find('ul').toggle();
});
于 2012-11-23T11:42:54.887 に答える
1 
$('li.dropdown').click(function() {
   $('.dropdown ul').hide();
    $(this).children('ul').show();
});

これを試してくださいhttp://jsfiddle.net/7NYhe/

于 2012-11-23T11:48:13.203 に答える