Question

我有几个不同页面的下拉菜单。我试图获取它，以便当您点击页面时，菜单下拉菜单将关闭。现在，下拉菜单保持打开状态，直到您将其悬停。例如，如果你选择＆＃34; hair＆＃34;菜单将关闭，而不是保持打开状态。

也不是这个问题的一部分，但如果有人有解决方案，我会非常感激。如果当前选择了所有页面，则下拉菜单会列出所有页面两次。有没有办法只选择显示一次？

jsfiddle - https://jsfiddle.net/z7dg5e0n/1/

＆＃13;

jQuery(".shop-beauty-span").html("All");
jQuery("#ShopBeautyPage1").show();

jQuery(".shop-beauty-li").on('click', function() {
  var value = jQuery(this).val();
  if (value) {
    jQuery(".shopbeautypage").hide();
    jQuery("#ShopBeautyPage" + value).show();
   jQuery(".shop-beauty-span").html($(this).text());
  }
});

＆＃13;

.shop-beauty-ul{
  display: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  position: absolute;
width:100%;
  text-align:center;
    min-width:200px;
}

.shopbeautypage{
  display:none;
}

#shop-beauty-drop:hover > ul{
  display: block;
    cursor: pointer;
}
#shop-beauty-drop:hover {
    cursor: pointer;
}

#shop-beauty-drop{
  background-color: #fff;
  width: 22%;
  text-align:center;
    margin: 0 auto;
    position: relative;
    min-width:200px;
      text-transform: uppercase;
  font-size: 15px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
    padding-top: 10px;
    margin-bottom: 200px;
}

.shop-beauty-li{
  list-style: none;
  text-align: center;
}

.shop-beauty-li:hover{
    cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shop-beauty-drop">
  <span class="shop-beauty-span"></span>
  <ul class="shop-beauty-ul">
    <li class="shop-beauty-li" value="1">All</li>
    <li class="shop-beauty-li" value="2">Hair</li>
    <li class="shop-beauty-li" value="3">Makeup</li>  
    <li class="shop-beauty-li" value="4">Skin</li>  
    <li class="shop-beauty-li" value="5">Under $100</li>  
  </ul>
</div>

<div id="ShopBeautyPage1" class="shopbeautypage" style="">
  Content of page 1
</div>
<div id="ShopBeautyPage2" class="shopbeautypage" style="display:none">
  Content of page 2
</div>
<div id="ShopBeautyPage3" class="shopbeautypage" style="display:none">
  Content of page 3
</div>
<div id="ShopBeautyPage4" class="shopbeautypage" style="display:none">
  Content of page 4
</div>
<div id="ShopBeautyPage5" class="shopbeautypage" style="display:none">
  Content of page 5
</div>

＆＃13;

Answer 1

您可以使用jQuery完成所有操作，而不是使用CSS :hover。

我以这种方式更改了代码，这似乎对我有用。

＆＃13;

function open() { jQuery(this).toggleClass('open', true); }
function close() { jQuery(this).toggleClass('open', false); }
jQuery("#shop-beauty-drop").hover(open, close);

jQuery(".shop-beauty-span").html("All");
jQuery("#ShopBeautyPage1").show();

jQuery(".shop-beauty-li").on('click', function() {
  var value = jQuery(this).val();

  // The second part of your question
  jQuery(this).addClass('active').siblings().removeClass('active');
  
  if (value) {
    jQuery(".shopbeautypage").hide();
    jQuery("#ShopBeautyPage" + value).show();
    jQuery(".shop-beauty-span").html($(this).text());
  }
  
	jQuery("#shop-beauty-drop").trigger("mouseout");
});

＆＃13;

.shop-beauty-ul {
  display: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  position: absolute;
  width: 100%;
  text-align: center;
  min-width: 200px;
}

.shopbeautypage {
  display: none;
}

#shop-beauty-drop.open > ul {
  display: block;
  cursor: pointer;
}

#shop-beauty-drop:hover {
  cursor: pointer;
}

#shop-beauty-drop {
  background-color: #fff;
  width: 22%;
  text-align: center;
  margin: 0 auto;
  position: relative;
  min-width: 200px;
  text-transform: uppercase;
  font-size: 15px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  padding-top: 10px;
  margin-bottom: 200px;
}

.shop-beauty-li {
  list-style: none;
  text-align: center;
}

/* the second part of your question */
.shop-beauty-li.active { display: none; }

.shop-beauty-li:hover {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shop-beauty-drop">
  <span class="shop-beauty-span"></span>
  <ul class="shop-beauty-ul">
    <li class="shop-beauty-li active" value="1">All</li>
    <li class="shop-beauty-li" value="2">Hair</li>
    <li class="shop-beauty-li" value="3">Makeup</li>
    <li class="shop-beauty-li" value="4">Skin</li>
    <li class="shop-beauty-li" value="5">Under $100</li>
  </ul>
</div>

<div id="ShopBeautyPage1" class="shopbeautypage" style="">
  Content of page 1
</div>
<div id="ShopBeautyPage2" class="shopbeautypage" style="display:none">
  Content of page 2
</div>
<div id="ShopBeautyPage3" class="shopbeautypage" style="display:none">
  Content of page 3
</div>
<div id="ShopBeautyPage4" class="shopbeautypage" style="display:none">
  Content of page 4
</div>
<div id="ShopBeautyPage5" class="shopbeautypage" style="display:none">
  Content of page 5
</div>

＆＃13;

这也是你小提琴的一个分支：

https://jsfiddle.net/ahmadm/eL4j33ct/

修改问题的第二部分也已解决。

希望有所帮助

选择页面后关闭下拉菜单

1 个答案: