jQuery切換下拉不起作用

Question

我使用jQuery和切換功能創建下拉列表，因爲我希望選擇器可以通過自定義滾動條顯示的下拉選項進行點擊。

到現在我有一些像這樣的代碼：JSFiddle

$(".row-span").click(function(){ 
$("#expandDropDown").toggleClass('drop'); 
$("#quantitySelectDrop").toggleClass('active'); 
$(".mCSB_container").mCustomerScrollbar(); 
$(".active-result").hover(function(){ 
$(this).toggleClass('highlighted').siblings().removeClass('highlighted');})}) 

當點擊DIV，各種選項的下拉菜單會顯示，在同一時間，在選擇的箭頭會點擊/切換時從下往上改變。當鼠標懸停在選項上時，選項的背景顏色將變爲灰色。

我預期的結果應該是這樣的：

但我不能從-9000px推下拉MEUN，以使其顯示爲0px。

從點擊功能，我已經包括兩個切換類觸發行動。但是，即使將「活動」類添加到div中，下拉菜單的位置仍然沒有改變並出現。

我不確定是否是我的邏輯錯誤，或者我不應該在點擊功能下放置兩個切換類。如何在點擊功能下觸發兩次切換更改？謝謝！！

Answer 1

好的，這裏有一些事情正在進行。

1. 在JavaScript設置未啓用jQuery的，所以你得到「$不是一個函數」的錯誤
2. 代碼是拼寫不一致。有些地方說「質量」，其他地方說「量」。此外，有些地方說「選擇」，其他地方說「選擇」。

編輯：我忘了提及，我也將你的內聯樣式移動到樣式表。你可能很難讓你的類重寫內聯樣式，所以如果可以的話，我會這樣做。如果不是，則可以嘗試!important或使用jQuery .css()屬性切換樣式，而不是切換類。

縮jQuery的，你可以擴大，因爲你需要：

$(function(){ 
 
    $('#expandDropDown').click(function(){ 
 
    $('#qualitySelectorDrop').toggleClass('active'); 
 
    $("#expandDropDown").toggleClass('drop'); 
 
    }); 
 
});

#expandDropDown { 
 
    color: blue; 
 
} 
 
#expandDropDown.drop{ 
 
    /*changing the selector arrow from down to up*/ 
 
    color: red; 
 
} 
 
.active-result.highlighted{ 
 
    background-color:red; 
 
} 
 
.mCustomScrollbar { 
 
    width: 38px; 
 
    position: absolute; 
 
    left: -9000px; 
 
} 
 
.mCustomScrollbar.active { 
 
    left: 0; 
 
} 
 
#qualitySelectorDrop { 
 
    left: -9000px; 
 
    width: 59px; 
 
    top: 29px; 
 
    height: 100px; 
 
    background: blue; 
 
    position: absolute; 
 
} 
 
#qualitySelectorDrop.active { 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <a class="row-span" id="expandDropDown" style="width:61px;"> 
 
    <span>Please Select</span> 
 
    <!-- <div><b></b></div> --> 
 
    </a> 
 
</div> 
 

 
<div class="drop-row" id="qualitySelectorDrop"> 
 
    <div class="drop-search"> 
 
    <ul class="drop-result mCustomScrollbar mCS1" tabindex="-1"> 
 
     <div id="mCSB1" class="mCustomScrollBox mCSB_vertical mCSB_5" tabindex="0" style="max-height:130px;"> 
 
     <div id="mCSB1_container" class="mCSB_container" style="position:relative; top:0px; left:0px; overflow:auto;"></div> 
 
      <li class="active-result">1</li> 
 
      <li class="active-result">2</li> 
 
      <li class="active-result">3</li> 
 
      <li class="active-result">4</li> 
 
      <li class="active-result">5</li> 
 
      <li class="active-result">6</li> 
 
      <li class="active-result">7</li> 
 
      <li class="active-result">8</li> 
 
     </div> 
 

 
     <div id="mCSN1_scrollbar_vertical" class="mCSB1_scrollTools mCSB1_scrollbar mCSB1_scrollTools_vertical" style="display:block;"> 
 
     <div class="mCSB_draggerContainer"> 
 
     <div id="mCSB1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height:30px; top:0px; display:block; height:31px; max-height:120px;" oncontextmenu="return false;"> 
 
      <div class="mCSB_dragger_bar" style="line-height:30px"></div> 
 
      <div class="mCSB_draggerRail"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </ul> 
 
    </div> 
 
</div>

工作小提琴是在這裏：https://jsfiddle.net/59y9jaef/4/

Answer 2

JS Fiddle Code is here

這是工作提琴。 您正在將錯誤的樣式應用於位置：-900px，並嘗試應用並嘗試切換類名稱。你的小提琴沒有鏈接JQuery JS文件。

HTML： 請選擇

<div class="drop-row" id="qualitySelectorDrop" > 

<div class="drop-search"> 
<ul class="drop-result mCustomScrollbar mCS1" tabindex="-1" style="width:38px; position:absolute; top:20px; left:0"> 
    <div id="mCSB1" class="mCustomScrollBox mCSB_vertical mCSB_5" tabindex="0" style="max-height:130px;"> 
    <div id="mCSB1_container" class="mCSB_container" style="position:relative; top:0px; left:0px; overflow:auto;"> 
    </div> 
    <li class="active-result">1</li> 
    <li class="active-result">2</li> 
    <li class="active-result">3</li> 
    <li class="active-result">4</li> 
    <li class="active-result">5</li> 
    <li class="active-result">6</li> 
    <li class="active-result">7</li> 
    <li class="active-result">8</li> 

    </div> 

    <div id="mCSN1_scrollbar_vertical" class="mCSB1_scrollTools mCSB1_scrollbar mCSB1_scrollTools_vertical" style="display:block;"> 
    <div class="mCSB_draggerContainer"> 
    <div id="mCSB1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height:30px; top:0px; display:block; height:31px; max-height:120px;" oncontextmenu="return false;"> 
    <div class="mCSB_dragger_bar" style="line-height:30px"> 
    </div> 

    <div class="mCSB_draggerRail"></div> 

    </div> 
    </div> 
    </div> 

    </ul> 
</div> 
</div> 

的JavaScript：

$(".row-span").click(function(){ 
//$("#expandDropDown").toggle('drop'); 
$("#quantitySelectDrop").toggle(); 
$('.drop-row').toggle(); 
$(".mCSB_container").mCustomerScrollbar(); 

$(".active-result").hover(function(){ 
$(this).toggleClass('highlighted').siblings().removeClass('highlighted'); 
}) 
}) 

CSS：

#quantitySelectDrop.active{ 
left:0px; 
} 

#quantitySelectDrop{ 
position:relative; display:none 
} 

.active-result.highlighted{ 
    background-color:red; 
} 

.drop-search{height:200px; display:block; width:500px}