jQuery菜单下拉气泡-Java 学习之路

所以我有这个菜单需要在任何项目悬停时显示一个框 . 该框是一个包含 Headers 文本和图像的div，这是我的代码 . 我正在尝试编写一个函数来切换项目悬停时的不同框 .

例如，将鼠标悬停在“按钮1”上，它应切换“＃tab1”，将鼠标悬停在“按钮3”上切换“＃tab3” .

类下拉内容具有 display: none 来隐藏所有div .

请任何帮助表示赞赏！

$('#secondary-menu li').hover(function(){ 
  var arr= ['1','2','3','4','5'];
  $.each($(this),function(index,value){
    //I don't know what to insert here
    $('#tab'+ [arr]).toggle();
  });
});

$('#secondary-menu li').onmouseout(function(){
  $('#tab' + [arr]).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
  <code>
    <div id="secondary-menu">
      <ul>
        <li>button 1</li>
        <li>button 2</li>
        <li>button 3</li>
        <li>button 4</li>
        <li>button 5</li>
      </ul>
    </div>

    <div id="tab1" class='dropdown-content'>
      <h5>Some Heading</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>

    <div id="tab2" class='dropdown-content'>
      <h5>Heading Two</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>
  
    <div id="tab3" class='dropdown-content'>
      <h5>Heading Three</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>

    <div id="tab4" class='dropdown-content'>
      <h5>Heading Four</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>

    <div id="tab5" class='dropdown-content'>
      <h5>Heading Five</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>
  </code>
</pre>

2 回答

在这里你找到一个解决方案https://jsfiddle.net/vh7rajh6/

$('#secondary-menu li').mouseenter(function(){ 
  $('#' + $(this).data('tab')).slideDown();
}).mouseleave(function(){
  $('#' + $(this).data('tab')).slideUp();
});

.dropdown-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="secondary-menu">
  <ul>
    <li data-tab="tab1">button 1</li>
    <li data-tab="tab2">button 2</li>
    <li data-tab="tab3">button 3</li>
    <li data-tab="tab4">button 4</li>
    <li data-tab="tab5">button 5</li>
  </ul>
</div>

<div id="tab1" class='dropdown-content'>
  <h5>Heading One</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab2" class='dropdown-content'>
  <h5>Heading Two</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab3" class='dropdown-content'>
  <h5>Heading Three</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab4" class='dropdown-content'>
  <h5>Heading Four</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab5" class='dropdown-content'>
  <h5>Heading Five</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

我使用 mouseenter ＆ mouseleave jQuery 方法和 slideUp ＆ slideDown 来提供某种og动画 .

Updated answer 没有 data-tab 或 data-id 这里你带一个解决方案https://jsfiddle.net/vh7rajh6/1/

$('#secondary-menu li').mouseenter(function(){ 
  $('#tab' + ($(this).index()+1)).slideDown();
}).mouseleave(function(){
  $('#tab' + ($(this).index()+1)).slideUp();
});

.dropdown-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="secondary-menu">
  <ul>
    <li>button 1</li>
    <li>button 2</li>
    <li>button 3</li>
    <li>button 4</li>
    <li>button 5</li>
  </ul>
</div>

<div id="tab1" class='dropdown-content'>
  <h5>Heading One</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab2" class='dropdown-content'>
  <h5>Heading Two</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab3" class='dropdown-content'>
  <h5>Heading Three</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab4" class='dropdown-content'>
  <h5>Heading Four</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab5" class='dropdown-content'>
  <h5>Heading Five</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

希望这会帮助你 .

回复于 2024-04-29T07:40:12+08:00

只需对代码进行一些重构，然后使用show / hide进行鼠标悬停 . 还使用data属性将li按钮链接到正确的div框 .

// ***********
// One way is to get count for all classes with the dropdown-content and loop through appending the data attribute.
// ***********
function AddMe(){

  var i = 1; // counter
  
  // loop through each .dropdown-content class and append
  // a li with incremented data-id
  $(".dropdown-content").each(function(){
    
    // content is here
    $("#secondary-menu ul").append("<li data-id='"+i+"'> button "+i+"</li>");
    
    i++; // increment the counter
    
  });
}

// ***********
//start function
// ***********
AddMe();

// ***********
//Events
// ***********
$('#secondary-menu li').on("mouseover", function() {
  var id = $(this).attr("data-id");
  $("#tab" + id).show();
});

$('#secondary-menu li').on("mouseout", function() {
  var id = $(this).attr("data-id");
  $("#tab" + id).hide();
});

.dropdown-content {
  display: none;
}

li:hover {
  cursor: pointer;
  background: skyblue;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="secondary-menu">
  <ul>
  <!--
    <li data-id="1">button 1</li>
    <li data-id="2">button 2</li>
    <li data-id="3">button 3</li>
    <li data-id="4">button 4</li>
    <li data-id="5">button 5</li>
    -->
  </ul>
</div>

<div id="content">

  <div id="tab1" class='dropdown-content'>
    <h5>Some Heading</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>

  <div id="tab2" class='dropdown-content'>
    <h5>Heading Two</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>

  <div id="tab3" class='dropdown-content'>
    <h5>Heading Three</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>



  <div id="tab4" class='dropdown-content'>
    <h5>Heading Four</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>



  <div id="tab5" class='dropdown-content'>
    <h5>Heading Five</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>
</div><!-- CONTENT END -->

回复于 2024-04-29T07:40:12+08:00

jQuery菜单下拉气泡

2 回答

相关问题