0

对不起..我遇到了几十个这样的问题，但似乎没有一个对我有帮助:(

我正在使用切换脚本，但每次我点击脚本链接时它都会切换，但它也会跳转到页面顶部！有任何想法吗？这是代码：

<a href="" id="button2">Read More…&lt;a>
<div id="hidden_content2" style="display:none;">
<p>bla bla</p>
</style>
</div>
<script>
$(document).ready(function() {
   $("#button2").toggle(
      function() {
         $(this).text('Hide Content…');
      },
      function() {
         $(this).text('Read More…');
      }
   ).click(
      function() {
         $("#hidden_content2").slideToggle("slow"…
      }
   );
});
</script>
4

7 回答 7

3

return false从您的点击处理程序函数。这可以防止链接的默认行为。

您的点击处理程序中还有一个错字：

$("#hidden_content2").slideToggle("slow"…

应该：

$("#hidden_content2").slideToggle("slow");

这将破坏您的处理程序（包括return false）直到修复。

于 2013-03-07T12:25:29.280 回答
2

阻止事件的默认操作。请注意，toggle不推荐使用事件方法，您可以改用text方法的回调函数。

$(document).ready(function () {
    $("#button2").click(function (event) {
        event.preventDefault();
        $(this).text(function (i, text) {
            return text == 'Hide Content…' ? 'Read More…' : 'Hide Content…'
        });
        $("#hidden_content2").stop().slideToggle("slow");
    });
})
于 2013-03-07T12:25:15.827 回答
0

您可以在点击中使用 event.preventDefault() 。

http://api.jquery.com/event.preventDefault/

我认为现在应该用 jQuery 中的 on 替换 click 方法。

于 2013-03-07T12:26:28.407 回答
0

您可以使用 preventDefault，例如：

.click(function(e){
    e.preventDefault();
    $("#hidden_content2").slideToggle("slow"…
});

或者，您可以只使用 span 或 div 代替锚标记并为其分配一个click()事件，因为您似乎实际上不需要使用锚标记。

于 2013-03-07T12:27:50.607 回答
0

首先，为什么要使用锚链接。它没有链接到任何东西，所以它应该是一个链接吗？您不能只使用普通的 div 并使用 CSS 将光标设置为指针吗？如果这样做，则无需阻止单击空链接的默认行为。

如果你保留链接，你有两个选择。

$('#button2').toggle(function(event) {
   event.preventDefault(); 
});

或者

$('#button2').toggle(function() {
    return false;
});
于 2013-03-07T12:28:03.787 回答
0

使用它：
只需在您的代码中进行一点更新

<a href="#" id="button2">Read More…&lt;a>

<div id="hidden_content2" style="display:none;">
    <p>bla bla</p>
</div>

<script type="text/javascript">
$(document).ready(function() {

    $("#button2").toggle(function() {

        $(this).text('Hide Content…');

        }, function() {

            $(this).text('Read More…');

    }).click(function(){

        $("#hidden_content2").slideToggle("slow");
        return false;

    });

});
</script>
于 2013-03-07T12:30:27.793 回答
0

利用 ：JavaScript:void(0); in href

<a href="jJavaScript:void(0);" id="button2">Read More…&lt;a>
<div id="hidden_content2" style="display:none;">
<p>bla bla</p>
</style>
</div>
<script>
$(document).ready(function() {
$("#button2").toggle(function() {
$(this).text('Hide Content…');
}, function() {
$(this).text('Read More…');
}).click(function(){
$("#hidden_content2").slideToggle("slow"…
});
});
于 2013-03-07T12:22:52.323 回答