0

ユーザーがリスト内の子要素をクリックした場合、アクティブなクラスを親要素と子要素の両方に追加する必要があります。私のhtmlは次のとおりです:-

<ul class="tabs">
      <li class="accordion"><a href="#tab1">Bar</a>
         <ul class="sub">
           <li>lorem/li>
           <li>ipsum</li>
           <li>Lorem Ipsum</li>
           <li>Dolor Sit Amet</li>
         </ul>
      </li>

以下のjqueryコードを使用して、アクティブなクラスを親要素と子要素の両方に追加していますが、エラーが発生しています:-

$("ul.tabs li").click(function() {
      $("ul.tabs li").removeClass("active").find(".sub li").removeClass("active"); 
      $(this).addClass("active").find(".sub li").addClass("active"); 
});

次に、CSS でアクティブなクラスのスタイルを設定しました。例を言う

.active {background:#EFEFEF;}

クリックされた (this) 子要素のみにアクティブなクラスが適用され、li 子要素全体には適用されません。ここで、子の李 (たとえば lorem) とともに、親の李 (バー) も強調表示されます。選択された子要素とその親要素の両方が異なる css スタイルを持つアクティブなクラスを持つツリー アコーディオン メニューのようなものと考えてください。

4

4 に答える 4

2

ここでは、次のようにアクティブなクラスをリスト項目に追加するだけであると仮定します: http://jsfiddle.net/gfkM4/

それがあなたが探していたものであることを願っています。乾杯。

于 2012-07-19T04:50:09.397 に答える
0

これは、jQueryを使用してアコーディオンメニューオプションにアクティブクラスを適用するためのデモです。

HTML：

<ul class="tabs">
  <li class="accordion">
    <a href="#tab1">
      Bar
    </a>
    <ul class="sub">
      <li>
        lorem
      </li>
      <li>
        ipsum
      </li>
      <li>
        Lorem Ipsum
      </li>
      <li>
        Dolor Sit Amet
      </li>
    </ul>
  </li>

  <li class="accordion">
    <a href="#tab2">
      Foo
    </a>
    <ul class="sub">
      <li>
        lorem
      </li>
      <li>
        ipsum
      </li>
      <li>
        Lorem Ipsum
      </li>
      <li>
        Dolor Sit Amet
      </li>
    </ul>
  </li>  
</ul>

CSS：

.tabs li{
  list-style:none;
}
.tabs li:hover{
  background:#88ccf9;
}
.tabs li a{
  color:#334499;
}
.tabs{
  border:1px solid #3344ff;
  background:#dcfcff;
  padding:10px;
}
.tabs .accordion .sub{
  padding:3px 3px 3px 18px;
  display:none;
}
.tabs .active .sub{
  display:block;
}
.tabs li.active{
  background:#77d9c9;
}

JQuery：

$(function() {
    $("ul.tabs li").click(function() {
        // remove .active from all li descendants
        $("ul.tabs li").not(this).removeClass("active");
        //hide all sub menu except current active
        $("ul.tabs li").not(this).find(".sub").hide(400);
        //apply active class on current selected menu
        $(this).addClass("active");

        //check if sub menu exists
        if($(this).find(".sub").length>0){
              //show the selected sub menu 
              $(this).find(".sub").show(500);
               //apply active class on all sub menu options
              $(this).find(".sub li").andSelf().addClass("active");
        } 
    });
});

http://codebins.com/bin/4ldqpa5で完全なビンを実行しました

于 2012-07-19T15:00:16.617 に答える
0

これを試して：

$("ul.tabs li").click(function() {
      $("ul.tabs li, .sub li").removeClass("active"); 
      $(this).find(".sub li").andSelf().addClass("active"); 
})
于 2012-07-19T01:47:59.207 に答える
0

更新: http://jsfiddle.net/4G7TJ/3/ (1 つの子のみが選択されるという新しい要件に従って)

$("ul.tabs li").click(function() {
    // remove .active from all li descendants
    $("ul.tabs li").not(this).removeClass("active");

    $(this)
        .addClass("active")
        .not('.accordion')
        .parents("li:first").addClass("active");
    return false;
});

lifalse を返す背後にある考え方は、子がクリックされたときに「クリック」イベントが親に伝播されないようにすることliです。これは、子のスタイル変更が取り消されるためです。

更新：動作デモ - http://jsfiddle.net/4G7TJ/1/

// only trigger the click on direct descendants
// (otherwise the kids get the event first and this won't work)
$("ul.tabs > li").click(function() {

    // remove .active from all li descendants
    $("ul.tabs li").not(this).removeClass("active");

    $(this).addClass("active").find(".sub li").addClass("active");
});

また、-<li>lorem/li>は閉じていません。つまり、すべてのタグが一致していない可能性が高く、クリックしたときに「現在の」リスト項目が何であるか (およびどのリストにあるか) がわかりません。

于 2012-07-19T01:56:34.587 に答える