3

ボタンがクリックされたときに段落表示CSSを切り替える関数を作成しようとしていますが、まったく機能しないようです。ブラウザがページの先頭に戻るだけですか？私のjQueryは...

$('.useful-links ul li a').click(function(){
    $('.useful-links ul li a').parent('li').find('p').toggle();     
});

そして私のマークアップは

<li>
     <a href="#">RESIDENTIAL AGENTS</a>
     <p style="display:none;">sfsdfsdfsd</p>
</li>
4

3 に答える 3

5

HTML構造は次のようになっていると思います。

<div class="useful-links">
    <ul>
        <li>
            <a href="#">RESIDENTIAL AGENTS</a>
            <p style="display:none;">sfsdfsdfsd</p>
        </li>
    </ul>
</div>​

// For your jQuery selector to work as you have it

$('.useful-links ul li a').on('click', function (e) {
    e.preventDefault(); // stop href()
    $(this).next('p').toggle();     
});

デモ： http： //jsfiddle.net/p4SJB/

于 2012-08-03T15:34:08.827 に答える
2

使用$(this)：

$('.useful-links ul li a').click(function(e){
    e.preventDefault();
    $(this).parent('li').find('p').toggle();     
});

私は共通の親を見つけてから、ターゲット要素を「見つける」ことを好みます。これは、HTMLマークアップが変更されpて以前に変更された場合でもa、jQueryは影響を受けないことを意味します。

デモを参照してください：http：//jsfiddle.net/S2hSp/

于 2012-08-03T15:34:14.033 に答える
2

まず、アンカー要素を使用しているため、デフォルトのアクションを防ぐ必要があります。次に、ロジックを実行できます。

$('.useful-links ul li a').click(function(e){
    e.preventDefault();
    $(this).closest('li').find('p').toggle();     
});

これが実際の例です

また、あなたの要素aとp要素が常に同じ親を持つことがわかっている場合は、このsiblings方法を使用できます（実際には、より良い効果はありません。代わりの方法です）。

$(this).siblings('p').toggle();

と別の例

于 2012-08-03T15:39:17.403 に答える