0

簡単なスクリプトがあります。それはdivを表示および非表示にします。しかし、私は「これ」に問題があります。

これは私のスクリプトです：

var accordion = $(".accordion"),
        content = $(".accordion .content"),
        button  = $(".accordion .btn-1");

    $(button, this).click(function(e){
        e.preventDefault();
        $(content, this).show();
    });

これは私のhtmlです

<div class="accordion">
    <img src="http://placehold.it/200x130" width="200" height="130" alt="">

    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        </p>
    </div>
    <a href="#" title="More" class="btn-1">More</a>
</div>

しかし、私はそのdivをたくさん持っています。さて、btn-1をクリックすると。すべてのアコーディオンが開きます。どうすれば修正できますか？また、btn-1をクリックしてコンテンツを閉じるにはどうすればよいですか。

助けてくれてありがとう！

4

3 に答える 3

2

.content「ボタン」がクリックされたときに対応する要素を開きたい。これは、 DOMトラバーサル を使用して簡単に解決できます[ドキュメント]：

$(".accordion .btn-1").click(function(e) {
     e.preventDefault();

     // find the button's sibling with class 'content' and show it
     $(this).siblings('.content').show();

     // if you want to toggle the visibility, use .toggle instead
     $(this).siblings('.content').toggle();

     // if the structure is more complex, find the corresponding '.accordion'
     // element first and then search for the '.content' element
     $(this).closest('.accordion').find('.content').toggle();
});

jQueryチュートリアルとAPIドキュメントを読むことをお勧めします。

于 2012-08-03T12:38:46.327 に答える
0

あなたのJSは少し奇妙です、私はあなたがやろうとしていることは

var content = $(".accordion .content"),
    button  = $(".accordion .btn-1");

button.click(function(e){
    e.preventDefault();
    content.show();
});

私が間違っている場合は訂正してください。の使用の背後にある意図thisは少し奇妙です。

于 2012-08-03T12:39:03.017 に答える
0

ボタンをクリックして、.closest（）を介してクラス'accordian'の祖先までDOMを上に移動し、クラス'content'のアイテムを検索します。

$(,'.btn-1').on('click', function(e){
e.preventDefault():
$(this).closest('accordian').find('.content').show();
}

これにより、何らかの理由でアコーディオン内を移動する必要がある場合に備えて、アコーディオン内でのbtn-1とコンテンツのDOMポジショニングは無関係になります（兄弟である必要はありません）。

于 2012-08-03T12:47:42.913 に答える