Question

我可以看到hover（）正在运行，但它没有隐藏并显示contact_numbers类？我的代码有什么问题？

$(function() {
  $("#hdCallUs").hover(function() {
    $(this).find('.contact_numbers').show();
    console.log('in')
  }, function() {
    $(this).find('.contact_numbers').remove()
    console.log('out')
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
  <span class="glyphicon glyphicon-earphone"></span>
  <span class="call_txt">Call Us Now</span>

  <div class="contact_numbers">
    <li>999</li>
    <li>888</li>
  </div>
</li>

Answer 1

因为html中的Dom结构错误

<ul>内遗失了{p> <div class="contact_numbers"> <li>如何在没有<ul>的情况下开始

并在你的问题中写 隐藏和显示不能使用悬停（）？而不是代码中.remove()的原因如果您想隐藏元素，请使用.hide()查看我的代码

＆＃13;

$(function() {
  $("#hdCallUs").hover(function() {
    $(this).find('.contact_numbers').show();
    console.log($(this).find('.contact_numbers'))
  }, function() {
    //$(this).find('.contact_numbers').remove() // this will remove element 
   $(this).find('.contact_numbers').hide() // this will hide
    console.log('out')
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
    <li id="hdCallUs">
  <span class="glyphicon glyphicon-earphone"></span>
  <span class="call_txt">Call Us Now</span>

  <div class="contact_numbers">
      <ul>
    <li>999</li>
    <li>888</li>
      </ul>
  </div>
</li>
</ul>

＆＃13;

Answer 2

您的HTML已损坏，您缺少<ul>标记。试试这段代码：

$(function() {
  $("#hdCallUs").hover(function() {
    $('.contact_numbers').show(); <!-- changed this -->
  }, function() {
    $('.contact_numbers').hide()
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
  <span class="glyphicon glyphicon-earphone"></span>
  <span class="call_txt">Call Us Now</span>

  <div class="contact_numbers" style="display:none">
  <ul>  <!-- added this -->
    <li>999</li>
    <li>888</li>
  </ul>
  </div>
</li>

Answer 3

好像你要删除hover out上的元素。

$(this).find('.contact_numbers').remove();

预期吗？要隐藏元素，请将其更改为：

$(this).find('.contact_numbers').hide();

Answer 4

我不理解你的html的结构（在没有ul的div里面的li？）但你可以在没有javascript的情况下实现这个，只需要像这样的css：

.contact_numbers{
   display: none;
}

#hdCallUs:hover .contact_numbers{
   display: block;
}

Answer 5

你的身体中有错误的html标记呈现不同与你期望的相比。下面是渲染的html：

<ul>
    <li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span>
 <span class="call_txt">Call Us Now</span>

        <div class="contact_numbers"></div>
    </li>
    <li>999</li>
    <li>888</li>
</ul>

很明显，.contact_numbers div对hide和show没有任何意义，这可能就是你没有得到预期结果的原因。纠正你的HTML，然后尝试。

您可以在此演示中检查控制台中呈现的html 演示：http://jsfiddle.net/GCu2D/929/

请确保您使用此演示中的.hide()和.show()或.toggle()：使用正确标记进行演示：http://jsfiddle.net/GCu2D/930/

<强> JS：

$(function () {
    $("#hdCallUs").hover(function () {
        $(this).find('.contact_numbers').show();
        console.log('in', $(this).find('.contact_numbers'))
    }, function () {
        $(this).find('.contact_numbers').hide()
        console.log('out', $(this).find('.contact_numbers'))
    });
});

<强> HTML：

<ul>
    <li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span>
 <span class="call_txt">Call Us Now</span>

        <div class="contact_numbers">
            <ul>
                <li>999</li>
                <li>888</li>
            </ul>
        </div>
    </li>
</ul>

Answer 6

那是因为你的html无效。您必须在li内包含第二级ul。 li不能将li作为其子项，display:none;也可以{/ 1}}给您的contact_numbers + remove它不会悬停，而只是hide它。 remove DOM永久删除$(function() { $("#hdCallUs").hover(function() { $(this).find('.contact_numbers').show(); console.log('in') }, function() { $(this).find('.contact_numbers').hide() console.log('out') }); });。

＆＃13;

.contact_numbers{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
  <span class="glyphicon glyphicon-earphone"></span>
  <span class="call_txt">Call Us Now</span>

  <div class="contact_numbers">
    <ul>
      <li>999</li>
      <li>888</li>
    </ul>
  </div>
</li>

＆＃13;

Command.Parameters.Add(":sessionid", MyObj.SessionID);

// Delete all the employees for that session

Command.CommandText = DeleteEmployees;

Command.ExecuteNonQuery();

Command.Parameters.Clear();

// Insert all the current employees in the list object in the db

Command.CommandText = InsertEmployees;

foreach (Company.Employee _emp in MyObj.Employees)
{
     [[ various parameters]]

    Command.ExecuteNonQuery();

    Command.Parameters.Clear();
}

＆＃13;

隐藏和显示不适用于悬停（）？

6 个答案: