树：切换 <li> 但链接 <a>答案

【问题标题】：Tree: toggle <li> but link <a>树：切换 <li> 但链接 <a>
【发布时间】：2014-03-03 21:26:55
【问题描述】：

我有这样的事情：

我需要切换文件夹并打开 pdf。
文件夹有类点击。
这是我的测试代码。您会注意到，如果我单击 pdf，它将隐藏文件夹 (e.preventDefault())。
再说一遍：我需要切换文件夹并打开 pdf 文件吗？ 我怎样才能做到这一点？

$("div.xxx ul li.click").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    if($(this).hasClass('active')) {
        $(this).removeClass('active').children("ul").hide();
    }else {
        $(this).addClass('active').children("ul").show();
    }
});

HTML：

<div class="xxx">
<ul>
    <li class="icon-pdf">
        <a href="xx.pdf">20130315151327_Kaufvertrag_.pdf</a>
    </li>
    <li class="icon-pdf">
        <a href="xxx">Entwurf_Kaufvertrag.pdf</a>
    </li>
    <li class="icon-folder folder click">
        <a href="Array">Ordner</a>
        <ul>
            <li class="icon-pdf">
and so on...

【问题讨论】：

使用 JQuery 切换功能.. :) 听起来很有趣.. “我需要切换文件夹并打开 pdfs”，答案是切换功能..
看起来不错..但可以清理为jsfiddle.net/arunpjohny/QK38b/1
是否可以通过后端脚本修改 html 输出，或者您无法控制？如果可能的话，请在下面查看我的答案，我认为这是最简单的解决方案之一。

标签： javascript jquery

【解决方案1】：

除了您现有的脚本之外，您还可以阻止作为文件夹直接子级的锚的默认设置：

$('.icon-folder > a').click(function(e) {
    e.preventDefault();
});

其他锚元素应该照常工作，因为它们不是.icon-folder 的直接子元素。

【讨论】：

当然！ :) 可行，但我不确定这是否是一个好的解决方案。
或者，删除文件夹的锚点并使用 CSS cursor:pointer 将手形光标悬停在 <li> 文件夹元素上。那么你根本不需要上面的脚本:)
就我而言，这似乎是唯一可行的解决方案。我尝试了其他想法，但没有一个按预期工作。

【解决方案2】：

将 click 类赋予 <li> 元素并触发对其的点击将使该事件对其所有子元素起作用。

我假设您正在服务器端生成文件夹和 pdf 的链接，一个简单的解决方案是给 <a> 元素在它是一个文件夹时点击类，而当它是一个 pdf 时让它保持正常。

还建议使用 cmets 中建议的 jQuery 函数 toggle()。

所以基本上，你的 html 应该是这样的（注意Ordner 链接）：

<div class="xxx">
<ul>
    <li class="icon-pdf">
        <a href="xx.pdf">20130315151327_Kaufvertrag_.pdf</a>
    </li>
    <li class="icon-pdf">
        <a href="xxx">Entwurf_Kaufvertrag.pdf</a>
    </li>
    <li class="icon-folder folder">
        <a href="Array" class="click">Ordner</a>
        <ul>
            <li class="icon-pdf">

你的 jQuery 是这样的：

$('.click').click(function(){
  $(this).next().toggle(); // I guess the <ul> is always after the <a>
});

【讨论】：

感谢您的宝贵时间！我重建了 html 并尝试使用您的切换解决方案。遗憾的是它没有按预期工作。
什么失败了？我亲自测试过，效果不错，也许我还能帮到你。
如果我先 $("div.xxx ul li ul").hide();通过单击第一个“orderner”，您的脚本将转到 url/array。如果我不先隐藏它，第一个“ordner”和第三个去 /array 休息就可以了。

【解决方案3】：

你可以试试这个：

$("div.xxx").find('a').click(function(){
    e.stopPropagation();
}).find('li.click').click(function(e) {
    $(this).toggleClass('active').find("ul").toggle();
});

只需在点击li.click 时切换className .active 并在其中找到ul 和.toggle()。

根据您的最新评论：

但问题仍然是它将关闭<li> 而不是链接href。

$("div.xxx").find('a').click(function(){
    e.stopPropagation();
// stop the click event on anchor to bubble up to the li.

【讨论】：

这可行，但问题仍然是它将关闭
而不是链接 href