选择仅使用jQuery单击li

时间：2018-03-12 10:23:40

标签： jquery html css

我想显示点击的ul，而不是每个ul。 ul有slide-in类。

如果有人能帮助我，我会非常感激，因为我被困住了。

我的代码如下所示：

＆＃13;
＆＃13; 
$('.gallery li.slide-in').on("click", function() {
  var ele = $('.icon-to-change');
  $(this).slideToggle();
  if (ele.hasClass('fa-plus')) {
    ele.removeClass('fa-plus')
      .addClass('fa-minus');
  } else {
    ele.addClass('fa-plus')
      .removeClass('fa-minus');
  }
});
＆＃13; 
.row .gallery {
  list-style-type: none;
  margin-left: 0px;
  margin-top: 50px;
  padding: 0;
  width: 100%;
  background: rgba(128, 128, 255, 0.5);
}

.gallery li a {
  display: block;
  color: #000;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1em;
  font-family: 'Bree Serif', serif;
}

.slide-in {
  list-style-type: none;
  display: none;
}

.fa-plus,
.fa-minus {
  float: right;
  position: relative;
  top: 2px;
}

.gallery li a:hover {
  background-color: #8080ff;
  color: white;
}

.gallery li a.header,
.gallery li a.header:hover {
  background-color: rgba(9, 17, 25, 1);
  color: white;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

  <title>New File</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="row">
    <div class="coll">
      <div class="col-lg-3 col-md-3">
        <ul class="gallery">
          <li><a class="header" href="javascript:void(0);">MACHINE GALLERY<i class="fa fa-plus icon-to-change"></i></a></li>
          <ul class="slide-in">
            <li><a href="">maize sheller</a></li>
            <li><a href="">locust bean dehuller</a></li>
            <li><a href="">fish smoker</a></li>
            <li><a href="">four row multi grain planter</a></li>
            <li><a href="">grain dryer</a></li>
            <li><a href="">pop corn machine</a></li>
            <li><a href="">palm oil processing machine</a></li>
            <li><a href="">soybean thresher</a></li>
          </ul>
          <li><a class="header" href="javascript:void(0);">MACHINE VIDEOS<i class="fa fa-plus icon-to-change"></i></a></li>
          <ul class="slide-in">
            <li><a href="">maize sheller</a></li>
            <li><a href="">locust bean dehuller</a></li>
            <li><a href="">fish smoker</a></li>
          </ul>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

我稍微更改你的html + jQuery部分，这是一个测试它的剪切器：

＆＃13;
＆＃13; 
// I add a class `activate-slide` on your li
$('.gallery li.activate-slide').on("click", function() {
  var ele = $(this).find('.icon-to-change');
  $(this).find(".slide-in").slideToggle();
  if (ele.hasClass('fa-plus')) {
    ele.removeClass('fa-plus')
      .addClass('fa-minus');
  } else {
    ele.addClass('fa-plus')
      .removeClass('fa-minus');
  }
});
＆＃13; 
.row .gallery  {
    list-style-type: none;
    margin-left: 0px;
    margin-top: 50px;
    padding: 0;
    width: 100%;
    background: rgba(128, 128, 255, 0.5);
}

.gallery li a {
    display: block;
    color: #000;
    padding: 10px 20px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
    font-family: 'Bree Serif', serif;
}
.slide-in {
    list-style-type: none;
    display:none;
}
.fa-plus, .fa-minus {
    float:right;
    position: relative;
    top: 2px;
}
.gallery li a:hover {
    background-color: #8080ff;
    color: white;
}
.gallery li a.header, .gallery li a.header:hover{
    background-color: rgba(9, 17, 25, 1); 
    color:white;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>New File</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="row"> 
        <div class="coll">
            <div class="col-lg-3 col-md-3">
                <ul class="gallery">
                    <!-- I add the class `activate-slide` and end the li after the `ul.slide-in`-->
                    <li class="activate-slide"><a class="header" href="javascript:void(0);">MACHINE GALLERY<i class="fa fa-plus icon-to-change"></i></a>
                        <ul class="slide-in">
                            <li><a href="">maize sheller</a></li>
                            <li><a href="">locust bean dehuller</a></li>
                            <li><a href="">fish smoker</a></li>
                            <li><a href="">four row multi grain planter</a></li>
                            <li><a href="">grain dryer</a></li>
                            <li><a href="">pop corn machine</a></li>
                            <li><a href="">palm oil processing machine</a></li> 
                            <li><a href="">soybean thresher</a></li>
                        </ul>
                    </li> <!-- end of `li.activate-slide`-->
                    <!-- I add the class `activate-slide` and end the li after the `ul.slide-in`-->
                    <li class="activate-slide"><a class="header" href="javascript:void(0);">MACHINE VIDEOS<i class="fa fa-plus icon-to-change"></i></a>
                        <ul class="slide-in">
                            <li><a href="">maize sheller</a></li>
                            <li><a href="">locust bean dehuller</a></li>
                            <li><a href="">fish smoker</a></li>
                        </ul>
                    </li> <!-- end of `li.activate-slide`-->
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

这是你在找什么？

答案 1 :(得分：0)

你应该试试这个

$('.gallery > li').on("click",function(){
            var ele = $('.icon-to-change');
              if($(this).children().children().hasClass('fa-plus')){
                $(this).next('.slide-in').slideToggle();
                ele.removeClass('fa-plus')
                   .addClass('fa-minus');
              }
              else{
                $(this).next('.slide-in').slideToggle();
                ele.addClass('fa-plus')
                   .removeClass('fa-minus');
              }
        })

答案 2 :(得分：0)

您的代码应如下所示，

您的HTML不正确

您的活动应该绑定到.header类

＆＃13;
＆＃13; 
 

    $(document).ready(function(){
  
	$('.header').click(function() {
	  var ele = $(this).children('.icon-to-change');
	  //$(this).slideToggle();
	  $(this).parent().children("ul").slideToggle();
	  if (ele.hasClass('fa-plus')) {
		ele.removeClass('fa-plus').addClass('fa-minus');
	  } else {
		ele.addClass('fa-plus').removeClass('fa-minus');
	  }
	});
	
  });
＆＃13; 
.row .gallery {
  list-style-type: none;
  margin-left: 0px;
  margin-top: 50px;
  padding: 0;
  width: 100%;
  background: rgba(128, 128, 255, 0.5);
}

.gallery li a {
  display: block;
  color: #000;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1em;
  font-family: 'Bree Serif', serif;
}

.slide-in {
  list-style-type: none;
  display: none;
}

.fa-plus,
.fa-minus {
  float: right;
  position: relative;
  top: 2px;
}

.gallery li a:hover {
  background-color: #8080ff;
  color: white;
}

.gallery li a.header,
.gallery li a.header:hover {
  background-color: rgba(9, 17, 25, 1);
  color: white;
}
＆＃13; 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!DOCTYPE html>
    <html>

    <head>

      <title>New File</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>

    <body>
      <div class="row">
        <div class="coll">
          <div class="col-lg-3 col-md-3">
            <ul class="gallery">
              <li><a class="header" href="javascript:void(0);">MACHINE GALLERY<i class="fa fa-plus icon-to-change"></i></a>
              <ul class="slide-in">
                <li><a href="">maize sheller</a></li>
                <li><a href="">locust bean dehuller</a></li>
                <li><a href="">fish smoker</a></li>
                <li><a href="">four row multi grain planter</a></li>
                <li><a href="">grain dryer</a></li>
                <li><a href="">pop corn machine</a></li>
                <li><a href="">palm oil processing machine</a></li>
                <li><a href="">soybean thresher</a></li>
              </ul>
</li>
              <li>
<a class="header" href="javascript:void(0);">MACHINE VIDEOS<i class="fa fa-plus icon-to-change"></i></a>
              <ul class="slide-in">
                <li><a href="">maize sheller</a></li>
                <li><a href="">locust bean dehuller</a></li>
                <li><a href="">fish smoker</a></li>
              </ul>
</li>
            </ul>
          </div>
        </div>
      </div>
    </body>

    </html>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

请修改您的代码，如下所示。 1）更新jQuery 2）在上面移动.slide-in 

  • $('.gallery li').click(function() {

  if ($(this).hasClass('open')) {
    $(this).removeClass('open');
    $(this).find('.slide-in').slideUp();
  } else {
    $(this).siblings().removeClass('open').find('.slide-in').slideUp();
    $(this).addClass('open');
    $(this).find('.slide-in').slideDown();
  }
});
    .row .gallery {
  list-style-type: none;
  margin-left: 0px;
  margin-top: 50px;
  padding: 0;
  width: 100%;
  background: rgba(128, 128, 255, 0.5);
}

.gallery li a {
  display: block;
  color: #000;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1em;
  font-family: 'Bree Serif', serif;
}

.slide-in {
  list-style-type: none;
  display: none;
}

.fa-plus,
.fa-minus {
  float: right;
  position: relative;
  top: 2px;
}

.gallery li a:hover {
  background-color: #8080ff;
  color: white;
}

.gallery li a.header,
.gallery li a.header:hover {
  background-color: rgba(9, 17, 25, 1);
  color: white;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

  <title>New File</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="row">
    <div class="coll">
      <div class="col-lg-3 col-md-3">
        <ul class="gallery">
          <li><a class="header" href="javascript:void(0);">MACHINE GALLERY<i class="fa fa-plus icon-to-change"></i></a>
            <ul class="slide-in">
              <li><a href="">maize sheller</a></li>
              <li><a href="">locust bean dehuller</a></li>
              <li><a href="">fish smoker</a></li>
              <li><a href="">four row multi grain planter</a></li>
              <li><a href="">grain dryer</a></li>
              <li><a href="">pop corn machine</a></li>
              <li><a href="">palm oil processing machine</a></li>
              <li><a href="">soybean thresher</a></li>
            </ul>
          </li>
          <li><a class="header" href="javascript:void(0);">MACHINE VIDEOS<i class="fa fa-plus icon-to-change"></i></a>
            <ul class="slide-in">
              <li><a href="">maize sheller</a></li>
              <li><a href="">locust bean dehuller</a></li>
              <li><a href="">fish smoker</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

    • 相关问题
    最新问题