Question

我正在使用jQuery和toggle函数创建一个下拉列表，因为我希望可以使用自定义滚动条显示的下拉选项来点击选择器。

到目前为止，我有一些代码：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推到0px以便显示。

从点击功能，我已经包含两个切换类来触发动作。然而，即使是＆＃34;活跃＆＃34;添加到div中，下拉菜单的位置仍然没有改变并出现。

我不确定这是不是我的逻辑错误，或者我不应该在点击功能下放置两个切换类。如何在单击功能下触发两次切换更改？谢谢！！

Answer 1

好的，这里有几件事。

在JavaScript设置中没有启用jQuery，所以你得到了＆＃34; $不是一个函数＆＃34;错误
代码拼写不一致。有些地方说＆＃34;质量，＆＃34;其他地方说＆＃34;数量。＆＃34;此外，有些地方说＆＃34;选择，＆＃34;其他地方说＆＃34;选择。＆＃34;

!important

.css()

您可以根据需要扩展的缩写jQuery：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

工作小提琴就在这里：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}

jQuery切换下拉列表无法正常工作

2 个答案: