多個下拉式開關

我有以下腳本部分工作。多個下拉式開關

HTML：

<div class="navigation3"> 
    click me 
</div> 
<div class="dropdown"> 
    <div class="items">icon Default 3</div> 
</div>

的jQuery：

$('.navigation3').click(function(event) { 
    $(this).toggleClass('active'); 
    $(".dropdown").toggle(); 
});

的.active部分作品被點擊的.navigtion3 s ^變成紅色，如果我點擊所有三個，三個去衝。

不工作的位是.dropdown。它應該直接放在.navigtion3 div下。此外，此刻它一次只顯示1 .dropdown，如果全部.navigation3都是.active，則應顯示全部。另外，根據用戶的選擇，我不知道用戶屏幕上將顯示多少個.navigation3和.dropdown。

我似乎無法得到這個工作，並會感謝一些jQuery專家的幫助。

的jsfiddle：

這是我目前有： http://jsfiddle.net/MTESY/12/

來源

2012-11-27 oshirowanen

位置：絕對把股利40像素從頁面頂部，而不是從下拉菜單中，您需要使用相對的 – Andy

如何像這樣http://jsfiddle.net/chrismoutray/MTESY/16/

$('.navigation3').click(function(event) { 
    var $nav3 = $(this), 
     $dd = $nav3.next('.dropdown'); 

    $nav3.toggleClass('active'); 

    var offset = 30, 
     offsettop = $nav3.offset().top + $nav3.height() + offset, 
     offsetleft = $nav3.offset().left; 

    $dd.css({ 
     top: offsettop, 
     left: offsetleft 
    }); 

    $nav3.hasClass('active') ? $dd.show() : $dd.hide(); 
});

的2位專注於這裏;找到正確的下拉元素

$nav3.next('.dropdown');

，並確保該元素將正確

$dd.css({ 
    top: offsettop, 
    left: offsetleft 
});

它並不完美，但它讓你開始

來源

2012-11-27 11:35:22

這相當接近，謝謝。我將從此開始並儘快恢復。 – oshirowanen

您可以根據您當前的光標位置附上師

$('.navigation3').click(function(event) { 
     $(this).toggleClass('active'); 
     $(".dropdown").css('left',event.pageX-10); 
     $(".dropdown").css('top',event.pageY+10); 
     $(".dropdown").toggle(); 
    });

http://jsfiddle.net/MTESY/14/

來源

2012-11-27 11:34:42 sayannayas

明顯比我的版本更好，但可以1.將「.dropdown」的右上角與點擊的右下角對齊在'.nav igation3'？ 2.如果單擊不同的'.navigation3'，停止激活的'.dropdown'消失？ – oshirowanen

這將觸發錯誤的下拉菜單 - 請參閱我的回答 –

@oshirowanen：按照克里斯的解決方案，因爲它明顯比我的好。我的下拉div會出現在光標當前位置，這與偏移位置相比並不好克里斯用過的。 – sayannayas

有腳本中的錯誤：

$('.navigation3').click(function(event) { 
    $(this).toggleClass('active'); 
    $(".dropdown").toggle(); // means toggle all the "dropdown". So if one is visible it will go invisible and vice-versa 
});

檢查：http://jsfiddle.net/Agh3Z/ 請注意，所有的「下拉列表」的div在同一位置得到顯示。所以你通過改變他們的位置來顯示他們。

來源

2012-11-27 11:34:53 Amber

如何更正此問題，我是否需要使用某種形式的find/closest'.dropdown'？ – oshirowanen

我已經發布瞭解決jsfiddle問題的解決方案。這裏的類名可能看起來不合適。您可以使用一些計數器來追蹤「下拉」的數量，或者您可以使用如下方式找到相關的「下拉」：$（「。dropdown」）[NUMBER]其中編號可以是序列號$（「。navigation3」）被點擊。 – Amber

多個下拉式開關

回答

相關問題