CODEWITHSUNDEEP
jqueryhtmlcss
showkey
showkey

Reputation: 358

How can get specified selector with jquery in my case?

I want to show all content below a tag such as article11 and article12 mouse entered ▼ in content1. 

$(function() {
  $("ul#nav span").hover(function() {
    console.log("i am in mouseover");
    $(this).parent().silbings().next().show();
  }, function() {
    console.log("i am in mouse left");
  });
});
* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}

ul#nav li {
  width: 120px;
  height: 30px;
  line-height: 30px;
  float: left;
  list-style: none;
  text-align: center;
}

a {
  display: block;
  border: 1px solid black;
}

ul#nav>li>ul>li>a {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="nav">
  <li>
    <a href=""><span>▼</span>content1</a>
    <ul>
      <li><a href="">article11</a></li>
      <li><a href="">article12</a></li>
    </ul>
  </li>
  <li>
    <a href=""><span>▼</span>content2</a>
    <ul>
      <li><a href="">article21</a></li>
      <li><a href="">article22</a></li>
    </ul>
  </li>
</ul>

When this denotes $("ul#nav span"),my try to point to expected tag :

$(this).parent().silbings().next()  
$(this).parent()[0].silbings()[0].next()[0]

Both of them is wrong.How can get specified selector with jquery in my case?
To correct my typo,why $(this).parent().siblings().children() can't get expected element?

Upvotes: 0

Views: 36

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly, you have a typo. The correct method name is siblings() not silbings(). You don't need that call anyway, as next() works on sibling elements.

Secondly, your logic doesn't work as you're calling show() on the sibling ul element when that is already displayed. Your CSS is hiding the child a elements instead, so you need to find() them. Also note that you can just call toggle() instead of providing two handlers to hover():

$(function() {
  $("ul#nav span").hover(function() {
    $(this).parent().next().find('a').toggle();
  });
});
* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}

ul#nav li {
  width: 120px;
  height: 30px;
  line-height: 30px;
  float: left;
  list-style: none;
  text-align: center;
}

a {
  display: block;
  border: 1px solid black;
}

ul#nav > li > ul > li > a {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="nav">
  <li>
    <a href=""><span>▼</span>content1</a>
    <ul>
      <li><a href="">article11</a></li>
      <li><a href="">article12</a></li>
    </ul>
  </li>
  <li>
    <a href=""><span>▼</span>content2</a>
    <ul>
      <li><a href="">article21</a></li>
      <li><a href="">article22</a></li>
    </ul>
  </li>
</ul>

However, with all that said, it makes far more sense to do this in CSS alone. If you use the :hover pseudo selector on the a element you expand the hit area for triggering the menu to appear:

* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}

ul#nav li {
  width: 120px;
  height: 30px;
  line-height: 30px;
  float: left;
  list-style: none;
  text-align: center;
}

ul#nav > li > ul {
  display: none;
}
ul#nav > li:hover > ul {
  display: block;
}

a {
  display: block;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="nav">
  <li>
    <a href=""><span>▼</span>content1</a>
    <ul>
      <li><a href="">article11</a></li>
      <li><a href="">article12</a></li>
    </ul>
  </li>
  <li>
    <a href=""><span>▼</span>content2</a>
    <ul>
      <li><a href="">article21</a></li>
      <li><a href="">article22</a></li>
    </ul>
  </li>
</ul>

Upvotes: 4

Related Questions