span onclick無法正常工作jquery

我有一個用css和jquery創建的treeview結構。要展開節點，我希望用戶單擊<li>（它是一個圖像）內的<span>，而不是節點本身。span onclick無法正常工作jquery

因此，這裏是我的HTML部分：

<div class="tree">  
<ul> 
<li class="parent active"><span class="expand"></span><a>Level 1</a> 
    <ul> 
     <li><span class="expand"></span><a>Level 2</a></li> 
     <li><span class="expand"></span><a>Level 2</a></li> 
     <li><span class="expand"></span><a>Level 2</a></li> 
     <li><span class="expand"></span><a>Level 2</a></li> 
    </ul> 
</li> 
<li class="parent active"><span class="expand"></span><a>Level 1</a> 
    <ul> 
     <li class="parent active"><span class="expand"></span><a>Level 2</a> 
      <ul> 
      <li class="parent active"><span class="expand"></span><a>Level 3</a> 
       <ul> 
        <li><a>Level 4</a></li> 
       </ul> 
      </ul> 
     </li> 
     <li><span class="expand"></span><a>Level 2</a></li> 
    </ul> 
</li> 
</ul> 
</div>

這裏的JS部分上跨度clikc事件（但它不工作）：

$('.tree li.parent > span.expand').click(function() { 
    $(this).parent().toggleClass('active'); 
    $(this).parent().children('ul').slideToggle('fast'); 
});

但是，下面的代碼工作但通過點擊<a>的<li>內：

$('.tree li.parent > a').click(function() { 
    $(this).parent().toggleClass('active'); 
    $(this).parent().children('ul').slideToggle('fast'); 
});

I N通過點擊跨度來擴展節點，因爲當點擊節點時，我需要重定向到另一個頁面來顯示它的細節。

請參閱爲此問題創建的此jsfiddle。

那麼爲什麼跨度上的點擊事件不起作用？

來源

2015-04-17 blackbishop

只需清理您的開啓和關閉標籤。我認爲你在那裏做了一些混亂。 – Advicer

這個問題是與CSS。標籤a與您的跨度重疊。用餘量替換填充，一切都將開始工作。

UPD：其實 - 刪除您的規則display:block爲a標籤小提琴：http://jsfiddle.net/8ucy1gjb/2/

來源

2015-04-17 20:21:31

謝謝你的回覆。這是問題所在。 – blackbishop

很棒的發現@謝謝！ –

在您的CSS選擇器中您有.tree li.parent > span.expand。這個選擇器對於你的標記是錯誤的。這是尋找的是

<div class="tree"> 
    <ul> 
    <li class="parent"> 
     <span class="expand"></span> 
    </li> 
    </ul> 
</div>

>這意味着直接的孩子，你沒有。只要刪除它，你應該沒問題。

$(".tree li.parent span.expand").on('click', function() {});

編輯正如有人向我指出，我錯過了頂級<span class="expand">。點擊事件可以用於頂層，但不適用於任何內部。如果您希望點擊全部CSS選擇器，我仍然會建議您更改CSS選擇器。

來源

2015-04-17 20:21:04 jeremywoertink

我實際上認爲「>」對於OP的html是可以的。 OP在'li.parent'下立即有'span.expand'。 –

哦，你是對的！我其實並沒有看到那個隱藏在那裏的人，我會編輯。 – jeremywoertink

你缺少一個右</li>標籤：

<div class="tree">  
<ul> 
<li class="parent active"><span class="expand"></span><a>Level 1</a> 
    <ul> 
     <li><span class="expand"></span><a>Level 2</a></li> 
     <li><span class="expand"></span><a>Level 2</a></li> 
     <li><span class="expand"></span><a>Level 2</a></li> 
     <li><span class="expand"></span><a>Level 2</a></li> 
    </ul> 
</li> 
<li class="parent active"><span class="expand"></span><a>Level 1</a> 
    <ul> 
     <li class="parent active"><span class="expand"></span><a>Level 2</a> 
      <ul> 
      <li class="parent active"><span class="expand"></span><a>Level 3</a> 
       <ul> 
        <li><a>Level 4</a></li> 
       </ul> 
      </li> <!-----I Was Missing!--> 
      </ul> 
     </li> 
     <li><span class="expand"></span><a>Level 2</a></li> 
    </ul> 
</li> 
</ul> 
</div>

來源

2015-04-17 20:26:46

你是對的，但它並沒有完全解決問題。它適用於2級和3級，但不適用於1級。 – blackbishop

這回答了您的問題「那麼爲什麼跨度上的點擊事件不起作用？」 –

@TahaPaksu我已經添加了缺失的標籤，但仍然與級別1的節點具有相同的概率。所以它並沒有完全回答我的問題 – blackbishop

而不是使用padding使用margin爲

該類

.tree li.parent > a { 
    padding: 0 0 0 28px; 
}

replac隨着電子商務的：

.tree li.parent > a { 
    margin: 0 0 0 28px; 
}

，因爲它是現在你的a標籤覆蓋在span.expand所以它不是點擊。

Fiddle

來源

2015-04-17 20:29:06

span onclick無法正常工作jquery

回答

相關問題