切换时超链接未打开

Question

我已经尝试解决这个问题好几天了，但我被困住了。我想要做的是：

当我进入页面时，我有几个链接，单击这些链接时应该打开一个链接，同时折叠并显示容器中的文本。单击链接时，图像会发生变化。我唯一无法开始工作的是打开链接，它没有做任何事情。

如果有人能帮助我，我会很棒/谢谢

<script>  
$(document).ready(function(){    
$(".toggle_container").hide();   

$("p.trigger").click(function(){  
$(this).toggleClass("active").next().slideToggle("slow");  
return false;  
});  

});
</script>

<style type="text/css">

p.trigger {  
 padding: 0 0 0 10px;
 margin: 0 0 5px 0;
 background: url(image/arrow.gif) no-repeat;
 height: 21px;
 line-height: 21px;
 width: 230px;
 float: left;
}  
p.trigger a {  
 color: #fff;
 text-decoration: none;
 display: block;
}  
p.trigger a:hover { color: #ccc; }  
p.active {background-position: left bottom;}  
.toggle_container {  
 margin: 0 0 5px;
 padding: 0; 
 overflow: hidden;
 font-size: 1.2em;
 width: 230px;
 clear: both;
}  
.toggle_container .block {  
 padding: 0 0 0 10px;
 margin: 0 0 5px 0;
 font-size:11px;
}  
</style>


<h2>Header</h2> 
<p class="trigger"><a style="color:#000;" href="http://www.loremipsum.com?id=er">&raquo; link</a></p>
<div class="toggle_container">
 <div class="block">
  &raquo; text
 </div>
</div>

Answer 1

$("p.trigger").click(function(){  
    $(this).toggleClass("active").next().slideToggle("slow");  
    return false;  
});  

您的链接无法“到达任何地方”的原因是您在 onClick 事件中返回 false。您告诉链接不遵循其默认操作，因此它不会遵循该链接。

但是，如果您删除 return false，那么每当您单击该链接时，您的页面都会重定向。

我的问题是，您要更改图像还是要在新窗口中打开链接？或者您只想将内容加载到页面中？

---

假设您想在单击链接时更改图像，您需要做的就是更改 IMG 的 SRC。

HTML

<h2>Header</h2> 
<p class="trigger">
    <a style="color:#000;" href="http://www.google.com/images/logos/ps_logo2.png">» link</a></p>
    <div class="toggle_container">
        <div class="block">
            » text
        </div>
        <img id='img' src="" />
    </div>

JAVASCRIPT

$(document).ready(function(){    
$(".toggle_container").hide();   

    $("p.trigger").click(function(){  
        $(this).toggleClass("active").next().slideToggle("slow");  
              $("#img").attr( 'src', $(this).find("a").attr("href") );

        return false;
    });  

});

---

如果您想在新窗口中打开链接，则只需更改您的 HTML：

HTML

<a style="color:#000;" href="http://www.google.com/" target="_blank">» link</a></p>

在 Javascript 中，只需删除 < code>return false 以遵循默认链接行为。

JAVASCRIPT

$("p.trigger").click(function(){  
    $(this).toggleClass("active").next().slideToggle("slow");  

}); 

---

如果您想将内容加载到页面中：

HTML

<h2>Header</h2> 
<p class="trigger">
    <a style="color:#000;" href="http://www.google.com/" target="_blank">» link</a></p>
    <div class="toggle_container">
        <div class="block">
            » text
        </div>
        <div id='load_content'></div>
    </div>

JAVASCRIPT

$("p.trigger").click(function(){  
    $(this).toggleClass("active").next().slideToggle("slow");  

    var link = $(this).find("a").attr("href");
    console.log(link);
    $("#load_content").load( link  );

    return false;
});  

Answer 2

您想在动画完成后打开 href 吗？如果是这样，您可以使用 slideToggle() 上的回调来触发 window.location 事件。