Question

我创建了一些内容，点击它时我想用class paragraphtoggle显示段落，但不能正常工作，这就是我试过的。

HTML

<div class="enzimskiprogramindex herbaprogramindex herbaindex nomargin nopadding container-fluid produkti">
     <div class="maincontainer">
        <div class="row">
              <div class="col-sm-offset-3 col-sm-9">
                <div class="col-sm-1">
                    <img src="img/enzicon.png">
                </div>
                <div class="col-sm-10">
                    <h1 class="ffyanone">Enzimski program prihrane pcela</h1>
                    <p class="paragraphtoggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus ultrices nulla, 
                        id consequat ipsum rutrum eget. Sed eget eros sit amet est mattis ultricies vitae ut nibh. 
                        Vestibulum vitae mi tincidunt, dapibus orci nec, malesuada eros. Duis pellentesque tincidunt 
                        quam, et dignissim dolor laoreet sed. In sed turpis ipsum. Integer elementum, orci eu ultrices 
                        facilisis, justo nisi finibus lorem, fringilla pellentesque elit tortor nec sem
                    </p> 
                </div>
               </div>       
        </div>
    </div> 
</div><!--Closed div indexproducts-->

JS

/* Latest compiled and minified JavaScript included as External Resource */ $(document).ready(function () {
$(".enzimskiprogramindex").on('click', function () {

    $(".paragraphtoggle").not($(this).next(".paragraphtoggle")).slideUp();
    $(this).next(".paragraphtoggle").slideToggle();
    });
});

Answer 1

该段落不是所点击元素的next兄弟。

使用find()代替next()来获取点击元素中的元素。

另一件事是，slideUp除了点击之外的其他段落，使用siblings()然后find()类选择器的段落，然后将它们向上滑动。

Demo

＆＃13;

/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function() {
  $(".enzimskiprogramindex").on('click', function() {

    $(this).find(".paragraphtoggle").slideToggle();
    $(this).closest(".enzimskiprogramindex").siblings().find(".paragraphtoggle").slideUp();
    return false;
  });
});

＆＃13;

.enzimskiprogramindex {
  height: auto;
  background-color: #f0952e;
  color: white;
  cursor: pointer;
  border-bottom: 5px solid white;
}
.enzimskiprogramindex .maincontainer {
  padding-top: 25px;
  padding-bottom: 25px;
}
.produkti img {
  margin-top: 15px;
}
.produkti h1 {
  margin-left: 10px;
  letter-spacing: 0.7px;
  font-size: 27px;
}
.paragraphtoggle {
  margin-top: 25px;
  margin-left: 10px;
  text-align: justify;
  display: none;
}
.herbaprogramindex {
  background-color: #71a139;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="enzimskiprogramindex herbaprogramindex herbaindex nomargin nopadding container-fluid produkti">
  <div class="maincontainer">
    <div class="row">
      <div class="col-sm-offset-3 col-sm-9">
        <div class="col-sm-1">
          <img src="img/enzicon.png">
        </div>
        <div class="col-sm-10">
          <h1 class="ffyanone">LOREM IPSUM DOLOR SIT AMET</h1>

          <p class="paragraphtoggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus ultrices nulla, id consequat ipsum rutrum eget. Sed eget eros sit amet est mattis ultricies vitae ut nibh. Vestibulum vitae mi tincidunt, dapibus orci nec, malesuada eros.
            Duis pellentesque tincidunt quam, et dignissim dolor laoreet sed. In sed turpis ipsum. Integer elementum, orci eu ultrices facilisis, justo nisi finibus lorem, fringilla pellentesque elit tortor nec sem</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!--Closed div indexproducts-->

＆＃13;

Answer 2

由于段落paragraphtoggle是div enzimskiprogramindex的后代，您需要使用$.fn.find()。

获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤。

$.fn.next()看起来就是紧接着兄弟姐妹。

使用

$(this).find(".paragraphtoggle")

而不是

$(this).next(".paragraphtoggle")

Answer 3

请尝试这个：

$(document).ready(function () {
    $(".enzimskiprogramindex").on('click', function () {


        $(this).find(".paragraphtoggle").slideToggle();
        $(".paragraphtoggle").siblings(".paragraphtoggle").slideUp();
        return false;
    });
});

DEMO

Answer 4

请试试这个：

$(".enzimskiprogramindex").click(function(e) {
    $('.enzimskiprogramindex p').not($(this).find('p')).toggleClass("enzimskiprogramindex");
    $(".ffyanone").next("p").slideToggle();
});

https://jsfiddle.net/MadalinaTn/q0kdej13/3/

为什么我无法隐藏显示我的段落

4 个答案: