Question

我正在尝试显示<li>元素的一些内容，如果它在id为#displayBox的div中有类.submenus。

它正在或多或少地做，但有一个问题，它做了一次，然后，它不再发生：S

我错过了什么？

HTML：

<div class="wrap">
    <div class="left col-md-8 col-sm-8">
        <ul id="mainNav">
            <li class="submenus">
                <a href="#">Home</a>
                <div class="info">Some stuff about Home</div>
            </li>
            <li>
                <a href="#">Location</a>  
            </li>
            <li class="submenus">
                <a href="#">Services</a>
                <div class="info">Some stuff about Services</div>
            </li>
            <li class="submenus">
                <a href="#">Merchandising</a>
                <div class="info">Some stuff about Merchandising</div>
            </li>
        </ul>
    </div>
    <div class="right col-md-4 col-sm-4">Social icons here</div>
    <div id="displayBox" class="col-md-12 col-sm-12"></div>
</div>

的CSS：

 #mainNav li{
        display:inline-block;
    }
    .left, .right {
        width:auto:
    }
    .info,
    #displayBox{
        display:none;
    }

    #displayBox {
        border:1px solid red;
        height:30px;
    }

JS：

$(".submenus").hover(function() {
      $info = $(this).find(".info");
    $("#displayBox").css("display", "block");
    $("#displayBox").html(($info).css("display", "block")).html();
    }, function() {
      $info = $(this).find(".info");
    $("#displayBox").css("display", "none");
   });

我认为这对我所做的事情来说太长了。对？它必须是一个更短的方法来实现这一目标吗？

谢谢！

Answer 1

为.html()设置$("#displayBox")时，您可能正在寻找此更改： https://jsfiddle.net/511j93tn/5/

Answer 2

这个jquery代码可以帮到你。试试这个

$(".submenus").hover(function() {
  $info = $(this).find(".info");
  $("#displayBox").css("display", "block");
  $("#displayBox").html(($info).html());
}, function() {
  $info = $(this).find(".info");
  $('#displayBox').css("display", "none");
});

在另一个div中显示一个类的内容

2 个答案: