切换时超链接未打开

Question

我这几天一直在尝试解决这个问题，但我被困住了。我想做的是：

当我进入页面时，我有几个链接，点击这些链接应该会打开一个链接，同时折叠并显示容器中的文本。单击链接时，图像会更改。我唯一不能开始工作的是打开链接，它什么也没做。

如果有人可以帮助我/thanx，我会很棒

<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 事件中您有return 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">&raquo; link</a></p>
    <div class="toggle_container">
        <div class="block">
            &raquo; 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">&raquo; link</a></p>

在您的 Javascript 中，只需删除您的 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">&raquo; link</a></p>
    <div class="toggle_container">
        <div class="block">
            &raquo; 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 事件。