在下拉点击菜单上可见的第一项

时间：2019-03-07 09:46:25

标签： jquery drop-down-menu

我已将我在Codepen上找到的此菜单调整为网站的一部分。

我想使第一个菜单项在加载页面时可见，而在单击其他菜单项时隐藏。

我该怎么做？

----------------------

----------------------

----------------------

----------------------

---------------------- 

$(document).on('click', '.itemscabecera', function(e){
  e.stopPropagation();
  $('.itemscabecera').not($(this)).removeClass('active');
  $(this).toggleClass('active');
});

$(document).on('click', function() {
  $('.itemscabecera').removeClass('active');
});

$(document).on('click', '.mega-menu', function(e){
  e.stopPropagation(); 
})
.itemscabecera {width: 12%;
margin:0.15rem; 
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
color: #ffffff;
padding: 15px 3px 20px 3px;
text-decoration: none;
text-align:center;
float:left;
display: inline-block;
background-color: #000;
position: relative;
font-family: Arial;
cursor: pointer;
}


.mega-menu {
  position: absolute;
  bottom: 0;
  background-color: #ffffff;
  border: 1px solid #000000;
  color: #000000;
  display: none;
  width: 140px;
  bottom: -92px;
  left: -1px;
}


.itemscabecera.active .mega-menu {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="itemscabecera">
    <span>1st menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
      
      </ul>
    </div>
  </div>
  <div class="itemscabecera">
    <span>2nd menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
 
      </ul>
    </div>
  </div>
  <div class="itemscabecera">
    <span>3rd menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
 
      </ul>
    </div>
  </div>
  <div class="itemscabecera">
    <span>4th menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
 
      </ul>
    </div>
  </div>
  
    <div class="itemscabecera">
    <span>5th menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
  
      </ul>
    </div>

2 个答案:

答案 0 :(得分：2)

只需将active类插入第一个div.itemscabecera，就像这样：

<div class="itemscabecera active">

然后删除此功能：

$(document).on('click', function() {
  $('.itemscabecera').removeClass('active');
});


$(document).on('click', '.itemscabecera', function(e){
  e.stopPropagation();
  $('.itemscabecera').not($(this)).removeClass('active');
  $(this).toggleClass('active');
});

$(document).on('click', '.mega-menu', function(e){
  e.stopPropagation(); 
})
		.itemscabecera {width: 12%;
margin:0.15rem; 
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
color: #ffffff;
padding: 15px 3px 20px 3px;
text-decoration: none;
text-align:center;
float:left;
display: inline-block;
background-color: #000;
position: relative;
font-family: Arial;
cursor: pointer;
}


.mega-menu {
  position: absolute;
  bottom: 0;
  background-color: #ffffff;
  border: 1px solid #000000;
  color: #000000;
  display: none;
  width: 140px;
  bottom: -92px;
  left: -1px;
}


.itemscabecera.active .mega-menu {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="itemscabecera active">
    <span>1st menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
      
      </ul>
    </div>
  </div>
  <div class="itemscabecera">
    <span>2nd menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
 
      </ul>
    </div>
  </div>
  <div class="itemscabecera">
    <span>3rd menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
 
      </ul>
    </div>
  </div>
  <div class="itemscabecera">
    <span>4th menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
 
      </ul>
    </div>
  </div>
  
    <div class="itemscabecera">
    <span>5th menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
  
      </ul>
    </div>

答案 1 :(得分：1)

在document.ready上，将活动的类添加到第一个菜单元素

$(document).ready(function(){
 var a=$('.itemscabecera')[0]
 $(a).addClass('active');
})


$(document).ready(function(){
 var a=$('.itemscabecera')[0]
 $(a).addClass('active');
})
$(document).on('click', '.itemscabecera', function(e){
  e.stopPropagation();
  $('.itemscabecera').not($(this)).removeClass('active');
  $(this).toggleClass('active');
});

$('.itemscabecera').on('click', function() {
  $('.itemscabecera').removeClass('active');
});

$(document).on('click', '.mega-menu', function(e){
  e.stopPropagation(); 
})
.itemscabecera {width: 12%;
margin:0.15rem; 
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
color: #ffffff;
padding: 15px 3px 20px 3px;
text-decoration: none;
text-align:center;
float:left;
display: inline-block;
background-color: #000;
position: relative;
font-family: Arial;
cursor: pointer;
}


.mega-menu {
  position: absolute;
  bottom: 0;
  background-color: #ffffff;
  border: 1px solid #000000;
  color: #000000;
  display: none;
  width: 140px;
  bottom: -92px;
  left: -1px;
}


.itemscabecera.active .mega-menu {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="itemscabecera">
    <span>1st menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
      
      </ul>
    </div>
  </div>
  <div class="itemscabecera">
    <span>2nd menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
 
      </ul>
    </div>
  </div>
  <div class="itemscabecera">
    <span>3rd menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
 
      </ul>
    </div>
  </div>
  <div class="itemscabecera">
    <span>4th menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
 
      </ul>
    </div>
  </div>
  
    <div class="itemscabecera">
    <span>5th menu</span>
    <div class="mega-menu">
      <ul>
        <li>menuitem1</li>
        <li>menuitem2</li>
        <li>menuitem3</li>
  
      </ul>
    </div>

相关问题
最新问题