0

我正在为我的问题和答案页面使用单击/隐藏功能。但是，当我单击问题以显示答案时，它会跳回顶部。我需要做什么才能让这停止。

这是我的编码：

脚本：

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".sub").hide();
//toggle the componenet with class msg_body
jQuery(".cthrough").click(function()
{
jQuery(this).next(".sub").slideToggle(500);
});});
</script>

CSS：

.cthrough {
    display: inline-block;
    font-size: 15px;
    font-family: 'Anaheim', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0px;
}

.sub {
    display: inline-block;
    font-size: 13px;
    padding-left: 10px;
}

HTML：

<a href="#" class="cthrough">This is my question</a>
<div class="sub">
    This is my answer.
</div>

我尝试将 a href=# 转换为 div 类，但这并不能使问题可点击。我也尝试将 # 取出，但这也无济于事。

4

3 回答 3

4

保留您的href="#"并使用jQuery.preventDefault()来防止跳回顶部的默认操作。

jQuery(".cthrough").click(function(e) {
    e.preventDefault();  // <-- first line
    jQuery(this).next(".sub").slideToggle(500);
    ...
于 2013-10-23T20:11:54.310 回答
1

#in的根本原因href。如果 URL 包含#后跟 div 名称，则用户将登陆该div. 这是浏览器的默认行为，在上述情况下，单击该 URL#会附加到根 URL，这就是它位于页面顶部的原因。

要解决此问题，请删除href="#"并使用style="cursor: pointer"以将手/指针符号保留到该链接。

而不是<a href="#" class="cthrough">This is my question</a> 使用<a class="cthrough">This is my question</a> 并将cursor: pointer样式添加到该类（.cthrough）。

于 2021-04-28T09:14:29.533 回答
0

e.preventDefault()如果我申请持续时间说slideDown().

有点hacky，但这对我有用。
浏览器疯狂地试图计算您在动画期间显示的元素的大小。
因此，我立即显示它，现在浏览器知道它的大小。
但是不透明度很低，然后我只是淡入淡出。

// show/hide jobs section
$('.job').hide();

$('a.jobTrigger').click(function(e){
    $('.job').hide();
    $(this).next('.job').show(0, function() {
        
        //animation to stop page jump
        $(this).css('opacity' , '.1');
        $(this).animate({
            opacity: 1
        });
    });
    e.preventDefault(); //keeps hash out of URL
});
于 2015-02-18T16:51:33.033 回答