0

リンクとその兄弟からクラスを追加/削除しようとすると、いくつか問題が発生します。に含まれるリンクの3つのグループがあります<div class="collapse_content"> ... </div>。同じコンテナ内のリンクから「Selected」クラスを追加および削除するようにjQueryを取得できましたが、別のコンテナ（グループ）にあるリンクを選択すると、前に選択したリンクはそのクラスを削除しません。

グループ内の各リンクはページをiframeに読み込んでいるため、すべて静的リンクです。また、リンクの各グループの上にjQueryの折りたたみトグル機能があります。

基本的に、jQueryが新しく選択されたリンクとは異なるグループにある前のリンクから「選択された」クラスを削除しない理由を誰かが理解するのを手伝ってくれるかどうか疑問に思っています。

任意のヘルプ/提案をいただければ幸いです。前もって感謝します。

これが私がこれまでに持っているコードです。

--jQuery--

$(function() {

 //Add 'selected' class to A tag within class collapse_content
$('.collapse_content a').on('click', function(e){
 $(this).addClass('selected').siblings().removeClass('selected');
 $(this).find('.collapse_content a').removeClass('selected');
});

//toggle the componenet with class collapse_tab
$(".collapse_tab").click(function() {
 $(this).next(".collapse_content").slideToggle(500);
});
});​

--HTML--

<div class="collapse_tab">Group 1</div>
    <div class="collapse_content">
        <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br>
        <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br>
        <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br>
        <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br>
    </div>

<div class="collapse_tab">Group 2</div>
    <div class="collapse_content">
        <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br>
        <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br>
        <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br>
        <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br>
    </div>

<div class="collapse_tab">Group 3</div>
    <div class="collapse_content">
        <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br>
        <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br>
        <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br>
        <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br>
    </div>

<div class="collapse_tab">Group 4</div>
    <div class="collapse_content">
        <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br>
        <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br>
        <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br>
        <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br>
    </div>

--CSS--

.collapse_tab {
    text-decoration:none;
    font-weight:bold;
    background-color:#0cf;
    color:#FFF;
    font-size:11px;
    padding: 2px;
    margin:0px;
    text-align:center;
    border:1px solid #09f;
    cursor: pointer;
}

.collapse_content {    
    font:Verdana, Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    font-size: 10px;
    background-color:#0cf;
    border:#fff 1px solid;
}​
4

2 に答える 2

1

これを試して

$(function() {

 //Add 'selected' class to A tag within class collapse_content
$('.collapse_content a').on('click', function(e){
    $('.collapse_content a').removeClass('selected');
    $(this).addClass('selected');
});

//toggle the componenet with class collapse_tab
$(".collapse_tab").click(function() {
    $(this).next(".collapse_content").slideToggle(500);
});
});​
于 2012-07-09T18:52:59.127 に答える
0

これは、jQueryで、クリックしたリンクを含むdivのみを表す「this」を使用しているためです。イベントハンドラーで、どの'collapse_content' divにあるかに関係なく、すべてのリンクからクラスを削除する場合は、'this'の代わりに$（'。collapse_contenta'）をセレクターとして使用します。

于 2012-07-09T18:58:56.853 に答える