Question

我正在尝试使用jQuery和jQuery Collapse来构建链接选项列表，其中链接可以在第一次点击时展开或折叠，如果它已展开，则在第二次单击时链接将带您到注定的href。

我开始在这里解决问题的方法： http://jsfiddle.net/smittles/vtuLsh7s/

<div class="expandy" data-collapse>
    <div class="title"><a href="http://google.com">Google!</a></div> 
    <div class="content">
        Lorem ipsum Cupidatat esse tempor reprehenderit ea sint occaecat sint Excepteur commodo esse exercitation.
    </div>
</div>

问题是锚标记被jQuery Collapse的href =“＃”的锚标记包裹。

如何构建这样的可折叠结构，如果面板展开，锚标签变为“可链接”？

Answer 1

这更简单：

javascript代码：

$("#divId").click(function () {
    $('#divId').unbind("click");
    $("#divId").click(function () {
        window.location.replace("http://www.google.com");
    });
});

Answer 2

不需要jQuery的开销。使用vanilla javascript实际上很容易做到这一点。

基本上我们为每个expandy的标题中的链接分配一个点击处理程序。

在点击处理程序中，我们检查expandy是否打开。

如果不是，我们阻止浏览器重定向，如果是，我们允许用户重定向

无论哪种方式我们切换崩溃/扩展

根本不需要任何外部库。

（Demo）

(function(){
    "use strict";
    var sections = document.getElementsByClassName('expandy'), section;
    for(var i = 0; section = sections[i]; i++) {
        section.querySelector('.title a').addEventListener('click',function(e) {
            var section = e.target.parentElement.parentElement;
            if(section.style.height == '1em') e.preventDefault();
            section.style.height = section.style.height == '1em' ? 'auto' : '1em';
        },false);
    }
})();

Answer 3

我有点像这样更改了html：

<div class="expandy" data-collapse>
    <a id='test' href="http://google.com">
      <div class="title">Google!</div> 
    </a>
    <div class="content">
        Lorem ipsum Cupidatat esse tempor reprehenderit ea sint occaecat sint Excepteur commodo esse exercitation.
    </div>
</div>

并添加了这个JS来修复你的问题：

$('#test').click( function() {
    if($(this).hasClass('open'))
    {
       window.location = $(this).attr('href');
    }
});

展开并折叠，锚点为目标链接

3 个答案: