Question

我试图创建一个函数来切换段落显示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>

Answer 1

我假设你的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/

Answer 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/

Answer 3

首先，您正在使用锚元素，因此您需要阻止默认操作。然后你可以做你的逻辑：

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

Here is a working example

另外，如果你知道你的a和p元素总是拥有相同的父元素，那么你可以使用siblings方法（不是为了更好的效果，只是替代方法）：

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

and another example

jQuery切换下一个P.

3 个答案: