1

使用している CMS がナビゲーション アイテムを出力する方法が原因で問題が発生しています。以前にこの質問をしたことがあり、うまくいくはずの解決策を受け取りましたが、JSが私の強みではないため、わかりません。短い背景。私のCMSは次のようなメニュー項目を出力します:

<ul id="amenu">
    <li><a href="#">Home</a></li><li><span class="currentbranch0">
        <a href="">Content</a></span>
        <ul class="multilevel-linkul-0" title="">
            <li><a href="">Content 2</a></li>
            <li><span class="currentbranch1"><a href="">Content 3</a></span></li>
        </ul>
    </li>
</ul>

問題はどこですか？CMS は、コードからわかるように currentbranchN というレベルに応じてインクリメントするだけでなく、スパン内のアクティブなセレクター クラスを出力します。

私はここで別のスレッドで助けを受け取りました、そして私たちはこの点に到達しました:

$(document).ready(function () {
  $('#amenu > li > a').click(function(){
    if ($(this).closest("span[class*='currentbranch']").attr('class') != 'active'){
      $('#amenu li ul').slideUp();
      $(this).next().slideToggle();
      $('#amenu li a').closest("span[class*='currentbranch']").removeClass('active');
      $(this).closest("span[class*='currentbranch']").addClass('active');
    }
  });
});

しかし、アコーディオンとしては機能しません。JSFiddle を参照してください: http://jsfiddle.net/EKe2R/5/。私はそれを機能させることに近づいていると思いますが、私のJSスキルはせいぜい基本的なものであるため、理解できないようです。基本的に、メニューを展開して (第 2 レベルの項目が選択されている場合)、アクティブなオブジェクト currentbranch1 を強調表示する必要があります。CMS が出力するナビゲーション項目を使用します。

ありがとう！:)

ニック

編集：これに追加するだけで、アコーディオンが機能しない主な問題は、第2レベルでもCMSが第1レベルの出力を出力し、コードが失敗することです

<span class="currentbranch0"></span>

編集：：

スライドダウンするものをハードコーディングしようとしています。これが私が試したコードで、失敗しました：

$(document).ready(function () {
  $('#amenu > li > a,#amenu > li > span > a').click(function(){
      //alert($(this).closest("span[class='currentbranch0']").attr('class'));
    if ($(this).closest("span[class='currentbranch0']").attr('class') != 'active'){
      $('#amenu li ul').slideUp();
      $(this).parents('li').children('ul').slideDown();
      $('#amenu li a').closest("span[class='currentbranch0']").removeClass('active');
      $(this).closest("span[class='currentbranch0']").addClass('active');
    }
  });
});

http://jsfiddle.net/GgKyV/1/フィドルはこちら

また、リンクが選択されているアコーションを自動的に開くようにフィドルを取得するにはどうすればよいですか。最初のレベルのリスは、ダミーではなく、Web コンテンツへの実際のリンクになります。

乾杯

4

3 に答える 3

2

li要素の最初の子であるアンカーリンクを選択しています

$('#amenu > li > a')

しかし、HTMLではアンカーリンクは2番目の子です

<li><span class="currentbranch1"><a href="">Content 3</a></span></li>

また、アクティブクラスはメソッドではチェックできませんが、hasClass関数でチェックできます。

このフィドルがあなたのために働くかどうか見てください

http://jsfiddle.net/fdcd6/1/

于 2013-02-27T13:16:41.570 に答える
1

これを使って...

  $('.currentbranch0').on('click', function(){
       $(this).next().slideToggle('slow');
  });

そして、このjSfiddleの例を参照してください

于 2013-02-27T13:25:58.297 に答える
1

以下の結果を期待していますか。以下のリンクを確認してください。

http://jsfiddle.net/EKe2R/11/

js コードのみが変更されました。

  $(document).ready(function () {
      $('#amenu > li > a,#amenu > li > span > a').click(function(){
          //alert($(this).closest("span[class*='currentbranch']").attr('class'));
        if ($(this).closest("span[class*='currentbranch']").attr('class') != 'active'){
          $('#amenu li ul').slideUp();
          $(this).parents('li').children('ul').slideDown();
          $('#amenu li a').closest("span[class*='currentbranch']").removeClass('active');
          $(this).closest("span[class*='currentbranch']").addClass('active');
        }
      });
});
于 2013-02-27T13:19:28.060 に答える