0

私は本当に一般的なものを作成しています - 折りたたみ可能なメニューリストです。実際には、ワードプレスの管理メニューをエミュレートしようとしています。私の理解を超えた何らかの理由で、slideToggleでメニューをスライドして開くことができましたが、トグルアンカーを再度クリックしても閉じません。これはjqueryです：

   $(document).ready(function() {   
  $('.menu-collapse').click(function(e){
   e.preventDefault();
   $(this).next('.admin-submenu').slideToggle();
  }); 
   });

これがマークアップです

<ul>
 <li class="top"><a href="" class="menu-item">Dashboard</a></a></li>
 <li class="top"><a href="" class="menu-item">Products</a><a href="" class="menu-collapse">
  <div class="admin-submenu">
   <ul>
    <li class="sub"><a href="">My Products</a></li>
    <li class="sub"><a href="">Add New</a></li>
   </ul>
  </div>
 </li>
 <li class="top"><a href="" class="menu-item">Lists</a><a href="" class="menu-collapse">
  <div class="admin-submenu">
   <ul>       
    <li class="sub"><a href="">Brands</a></li>
    <li class="sub"><a href="">Colors</a></li>       
    <li class="sub"><a href="">Locations</a></li>
    <li class="sub"><a href="">Manufacturers</a></li>
   </ul>
  </div>
 </li>
</ul>

誰でも助けてくれますか？

4

3 に答える 3

2

HTML が無効です。各開始 <a> タグに対して、一致する終了タグが 1 つだけあることを確認する必要があります: </a>

于 2010-10-14T15:38:02.303 に答える
1

buh buh が指摘したように、マークアップにはいくつかのエラーがあります。</a>一致するオープナーのない終了タグと、<a>一致するクローザーのない開始タグがあります。かなり単純化することもできます。タグはリスト項目のコンテナとして完全に機能するため、 <div>sは必要ありません。<ul>これをマークアップとして使用してみてください。

<ul>
    <li class="top"><a href="" class="menu-item">Dashboard</a></li>
    <li class="top"><a href="" class="menu-item">Products</a>
        <ul class="admin-submenu">
            <li class="sub"><a href="">My Products</a></li>
            <li class="sub"><a href="">Add New</a></li>
        </ul>
    </li>
    <li class="top"><a href="" class="menu-item">Lists</a>
        <ul class="admin-submenu">    
            <li class="sub"><a href="">Brands</a></li>
            <li class="sub"><a href="">Colors</a></li>                          
            <li class="sub"><a href="">Locations</a></li>
            <li class="sub"><a href="">Manufacturers</a></li>
        </ul>
    </li>
</ul>

次に、jQuery で、.menu-collapseセレクターをに変更します.menu-item。

これが実際のデモです: http://jsfiddle.net/Ender/zUf9W/

于 2010-10-14T15:45:19.820 に答える
0

あなたの構文は壊れています。a.menu-collapseタグは開くだけで、閉じません。

補足として、? が必要div.admin-submenuですか? それとも、ネストされた に admin-submenu クラスを与えることができますulか? また、aネストされた内部liは不要です。外観にも Javascript にも必要ありません。

于 2010-10-14T15:40:32.890 に答える