时间戳

首页 > 解决方案 > 值未出现在下拉菜单中

html - 值未出现在下拉菜单中

问题描述

我正在使用 SemanticUI 设计一个下拉菜单，该菜单根据用户的选择更改页面内容。但是，我在下拉菜单中看不到任何值，因此无法根据用户的选择在不同内容之间切换。

重申。我无法单击下拉菜单，因为无法选择下拉菜单中的任何值。

我在浏览器控制台中没有看到与此问题特别相关的任何错误。

$(document).ready(function(){
  $('.ui.dropdown').dropdown();
});
.uk-switcher>:not(.uk-active) {
  display: none;
}

.dropdown-wrapper:before,
.dropdown-wrapper:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.dropdown-wrapper {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dropdown a {
  color: #4183C4;
  text-decoration: none;
}

.dropdown a:hover {
  color: #1e70bf;
  text-decoration: none;
}

/* not need for uikit CSS use only this line */
.uk-switcher>:not(.uk-active) {
  display: none;
}

.dropdown-wrapper:before,
.dropdown-wrapper:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.dropdown-wrapper {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dropdown a {
  color: #4183C4;
  text-decoration: none;
}

.dropdown a:hover {
  color: #1e70bf;
  text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<center>
  <h1>Select Cohort</h1>
</center>
<section class="dropdown-wrapper">
  <div class="ui selection fluid dropdown">
    <input type="hidden" name="gender">
    <i class="dropdown icon"></i>
    <div class="default text">Select Cohort</div>
    <div class="menu" data-uk-switcher="{connect:'#my-id', active:0}">
      <div class="item" data-value="1">
        <a href="#">Option 1</a>
      </div>
      <div class="item" data-value="1">
        <a href="#">Option 2</a>
      </div>
      <div class="item" data-value="1">
        <a href="#">Option 3</a>
      </div>
      <div class="item" data-value="0">
        <a href="#">Option 4</a>
      </div>
    </div>
  </div>
</section>
<ul id="my-id" class="uk-switcher uk-margin">
  <div class="row" style="width:100%;left:0;top:0;margin:0;padding:0;">
    <!-- single-instructor -->
    <div class="col-lg-2" style="margin:25px;">
      <div class="hover panel">
        <div class="front">
          <div class="single_instructor">
            <div class="author_decs">
              <h4>Test</h4><br>
              <p class="profession">A</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- single-instructor -->
  <div class="col-lg-2" style="margin:25px;">
    <div class="hover panel">
      <div class="front">
        <div class="single_instructor">
          <div class="author_decs">
            <h4>Test B</h4><br>
            <p>B</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div><h2>Option 3</h2></div>
  <div><h2>Option 4</h2></div>
</ul>

标签： htmljquerycss

解决方案

我不清楚你的问题，但如果你想查看你的下拉菜单，你可以像下面这样

HTML：

 <section class="dropdown-wrapper">
   <div class="ui selection fluid dropdown">
     <input type="hidden" name="gender">
     <i class="dropdown icon"></i>
     <div class="menu" data-uk-switcher="{connect:'#my-id', active:0}">
       <div class="item" data-value="1" onclick="viewDropdown()">
         <a href="#">Option 1</a>
       </div>
       <div class="item" data-value="1">
         <a href="#">Option 2</a>
       </div>
       <div class="item" data-value="1">
         <a href="#">Option 3</a>
       </div>
       <div class="item" data-value="0">
         <a href="#">Option 4</a>
       </div>
     </div>
   </div>
 </section>
 <ul id="my-id" class="uk-switcher uk-margin ">
   <div class="row" style="width:100%;left:0;top:0;margin:0;padding:0;">
     <!-- single-instructor -->
     <div class="col-lg-2" style="margin:25px;">
       <div class="hover panel">
         <div class="front">
           <div class="single_instructor">
             <div class="author_decs">
               <h4>Test</h4><br>
               <p class="profession">A</p>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <!-- single-instructor -->
   <div class="col-lg-2" style="margin:25px;">
     <div class="hover panel">
       <div class="front">
         <div class="single_instructor">
           <div class="author_decs">
             <h4>Test B</h4><br>
             <p>B</p>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div>
     <h2>Option 3</h2>
   </div>
   <div>
     <h2>Option 4</h2>
   </div>
 </ul>

CSS：

.uk-switcher{
  display:none;
}

.h-display-block{
  display:block ;
}
.dropdown-wrapper:before,
.dropdown-wrapper:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
.dropdown-wrapper {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.dropdown a {
  color: #4183c4;
  text-decoration: none;
}
.dropdown a:hover {
  color: #1e70bf;
  text-decoration: none;
}
/* not need for uikit CSS use only this line */

.dropdown-wrapper:before,
.dropdown-wrapper:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
.dropdown-wrapper {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.dropdown a {
  color: #4183c4;
  text-decoration: none;
}
.dropdown a:hover {
  color: #1e70bf;
  text-decoration: none;
}

js：

   $( document ).ready(function() {
    $('.ui.dropdown')
    .dropdown() ;
    });

function viewDropdown(){
  var element = document.getElementById('my-id');

  element.classList.toggle("h-display-block");
}

推荐阅读