树：切换<li>但链接<a></a> </li>

Question

我有这样的事情：

我需要切换文件夹并打开pdf 文件夹点击了班级 这是我的测试代码。你会注意到，如果我点击pdf它会隐藏文件夹（e.preventDefault（））。
再次：我需要切换文件夹并打开pdfs？ 我怎样才能做到这一点？

$("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...

Answer 1

除了现有的脚本之外，您还可以阻止默认锁定文件夹的直接子项：

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

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

Answer 2

你可以试试这个：

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

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

---

根据您的最新评论：

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

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

Answer 3

将点击类提供给<li>元素并触发对其的点击将使该事件对其所有子项起作用。

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

同样建议使用评论中建议的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>
});

Answer 4

您只需要使用slideToggle

 $("div.xxx ").click(function(e) {
     $(this).find('ul li').slideToggle('slow');  
 });

注意：如果添加active类用于滑动元素，那么此代码将保持良好状态。

现场演示：

http://jsfiddle.net/dreamweiver/BxL2B/3/

保持简单愚蠢

快乐编码：）