Question

这是我的小提琴：http://jsfiddle.net/mikeritter/prsfM/28/

这是我的jQuery：

$(document).ready(function(){
    function howdy(n){
        alert('Howdy '+n+'!');
    }

    function hideArts(){
        $('article').hide();
    }
    hideArts();

    $("a.toggleart").click(function(){
        var cur = $(this).parent().index();
        //alert(cur);
        $('article').eq(cur).toggle();
    });
});

切换后，为什么文章会立即消失？

Answer 1

您有<a>将用户发送到新页面。您应该通过添加<a>或href="#"

取消onclick="return false;"活动

如果您不取消用户，则将用户发送到href=""将重新加载页面。

Answer 2

试试this JSFiddle;我修改了你自己的一些修正：

您的click处理程序需要e.preventDefault()才能阻止<a>导航到新页面：
```
$("a.toggleart").click(function(e) {
    e.preventDefault();
```
您无需使用JavaScript隐藏面板。一个简单的
```
article {
    display: none;
}
```
就够了。

你唯一需要来解决问题的方法是添加

e.preventDefault();

到你的点击处理程序，它停止浏览器执行事件的默认行为，在这种情况下，导航到另一个页面。

Answer 3

更改

$("a.toggleart").click(function(){
    var cur = $(this).parent().index();
    $('article').eq(cur).toggle();
});

到

$("a.toggleart").click(function(e){ // added the e as the parameter, it maps to the event
    e.preventDefault(); // this line will cancel the default link action ..
    var cur = $(this).parent().index();
    $('article').eq(cur).toggle();
});

取消链接的默认功能...

演示 http://jsfiddle.net/gaby/prsfM/29/

隐藏的文章不会熬夜切换

3 个答案: