切换上一课

Question

https://jsfiddle.net/4aLzu744/

如果你看这个小提琴，我有一个菜单。如果你点击加号它会旋转并成为x。

我想要实现的是，如果您单击文本内的[关闭]，它会再次旋转x并关闭菜单。

我已尝试使用.closest（）和.prev（），但它无法正常工作。

.wrapper{
  min-width:420px;
}

Answer 1

closest()用于查找匹配的祖先元素，此处plus不是close的祖先，而是另一个祖先元素的兄弟。

您可以在同一个`项目元素中找到plus

$(this).closest('.project').find('.plus').toggleClass('rotated');

$(".singleproject").hide();
$(".plus").click(function() {
  $(this).next('.singleproject').toggle();
});

$(".singleproject").hide();
$(".close").click(function() {
  $(this).parent('.singleproject').toggle();
});

$('.plus').click(function() {
  $(this).toggleClass('rotated');
});

$('.close').click(function() {
  $(this).closest('.project').find('.plus').toggleClass('rotated');
});

.titolo,
.plus {
  float: left;
  font-size: 18px;
}
.plus {
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
  float: right;
  cursor: pointer;
}
.project {
  padding-bottom: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid black;
}
.rotated {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

Answer 2

.plus是父母的兄弟，所以你需要再增加一个find

$('.close').click(function(){
   $(this).closest('.project').find('.plus').toggleClass('rotated');
});

Answer 3

你必须取父singleproject，然后在里面找到相应的plus：

$(".close").click(function() {
  $(this).parent('.singleproject').toggle();
    $(this).closest('.project').find('.plus').toggleClass('rotated');
});

Answer 4

$('.close').click(function() {
  $(this).closest('.project').find('.plus').toggleClass('rotated');
});

使用最近的查找父类项目，找到类加

demo

Answer 5

试试这个;）

$(".plus").click(function() {
  $(this).next('.singleproject').toggle();
  $(this).toggleClass('rotated');
});

$(".close").click(function() {
  $(this).closest('.project').find('.plus').trigger('click');
});

.titolo,
    .plus {
      float: left;
      font-size: 18px;
    }
    
    .plus {
      -webkit-transition: all .2s ease-in;
      -moz-transition: all .2s ease-in;
      -o-transition: all .2s ease-in;
      transition: all .2s ease-in;
      float: right;
      cursor: pointer;
    }
    
    .project {
      padding-bottom: 40px;
      margin-bottom: 20px;
      border-bottom: 2px solid black;
    }
    
    .rotated {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    
    .singleproject {
      display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>

<div class="project">
  <div class=titolo>TITLE</div>
  <div class="plus">+</div>
  <div class="singleproject">
    <p>
      <br>
      <br>123</p>
    <div class="close">[ Close ]</div>
  </div>
</div>