javascript - 在一个元素上切换两个类而不切换同级元素

Question

在我的文档中，我有两个元素。这些元素的内容在加载时隐藏。当用户单击该元素的标题或加号时，它会显示内容。目前，当一个元素正在显示内容时，如果用户单击文档中的任意位置，它会关闭所有打开的元素。我不知道是什么导致了这个问题。

这是我的 javascript:

function DropDown(element){
    this.title = element;
    this.initEvents();
}

DropDown.prototype = {
    initEvents : function() {
        var obj = this;
        obj.title.on('click', function(event){
        $(this).parent().next('.drop').toggleClass('active');
          event.stopPropagation();
        });
      }
    }

$(function(){
    var title = new DropDown( $('.title'));
    $(document).click(function(){
        $('.drop').removeClass('active');
    });
});

$(document).ready(function() {
    $rotated = false;
    $('.plus, .title').click(function(){
        $(this).toggleClass('rotateOn'); //rotates plus symbol in CSS
    });
});

它没有做的(我希望它做的)是，如果用户单击标题或加号，将显示内容，加号将旋转。

这是我的 jsFiddle以供引用。由于某种原因，在我的 fiddle 中，加号不会旋转，但在我正在处理的完整文档中，它会旋转。

Answer 1

这是你的问题，我注释错了行:

$(function() {
  var title = new DropDown($('.title'));
  $(document).click(function() {
    //$('.drop').removeClass('active');
  });
});

对于跨度旋转，将其添加到您的 css 中:

span.rotate{
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  position: absolute;
}

稍微改变一下你的函数:

$(document).ready(function() {
  $rotated = false;
  $('.plus, .title').click(function() {
    $(this).toggleClass('rotateOn');
    $(this).children('span').toggleClass('rotate');
  });
});

当然，单独使用 + 号是行不通的，但是如果您使用例如 +aaa 这样的字符串，您就可以看到。

完整片段:

$(function() {
  function DropDown(element) {
    this.title = element;
    this.initEvents();
  }

  DropDown.prototype = {
    initEvents: function() {
      var obj = this;
      obj.title.on('click', function(event) {
        $(this).parent().next('.drop').toggleClass('active');
        event.stopPropagation();
      });
    }
  }

  $(function() {
    var title = new DropDown($('.title'));
    $(document).click(function() {
      //$('.drop').removeClass('active');
    });
  });

  $(document).ready(function() {
    $rotated = false;
    $('.plus, .title').click(function() {
      $(this).toggleClass('rotateOn');
      $(this).children('span').toggleClass('rotate');
    });
  });

});

body {
  margin: 0;
  padding: 0;
  background: #141516;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 400;
  line-height: 2.3rem;
  color: #b3b3b3
}

::selection {
  background: #00DE6F;
  color: #141516
}

a {
  color: inherit
}

a:hover {
  color: inherit
}

.container {
  max-width: 500px;
  margin: 0 auto
}

.main {
  margin: 0px
}

.main a {
  color: #fff;
  text-decoration: none;
  transition: all 0.2s ease-in-out
}

.main a:hover {
  color: #00DC73
}

.job {
  border-bottom: 1px solid #191919;
  padding-bottom: 15px
}

.job .drop {
  display: none;
  margin-top: 20px
}

.job .drop.active {
  display: block;
  margin-top: 20px
}

.rotateOn {
  transform: rotateZ(45deg)
}
span.rotate{
  -moz-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  position: absolute;
}

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<div class="container">
    <div class="main">

        <div class="job 1">
            <h3>
                <a href="#" class="title">Job 1<span class="pull-right plus">+</span></a>
                <a href="#" class="btn btn-success btn-xs pull-right"></a>

            </h3>
            <div class="drop">
                <p class="clearfix">
                    Info
                </p>

                <p><strong>What you’ll do:</strong></p>
                <ul>
                    <li>info</li>


                </ul>

                <p><strong>What we’re looking for:</strong></p>
                <ul>
                    <li>info</li>

                </ul>

                <p><strong>Bonus points:</strong></p>
                <ul>
                    <li>info</li>
                </ul>


            </div>
        </div>
        <!-- //END -->

        <div class="job 2">
            <h3>
                <a href="#" class="title">Job 2<span class="pull-right plus">+</span></a>
                <a href="#" class="btn btn-success btn-xs pull-right"></a>

            </h3>
            <div class="drop">
                <p class="clearfix">
                    Info
                </p>

                <p><strong>What you’ll do:</strong></p>
                <ul>
                    <li>info</li>


                </ul>

                <p><strong>What we’re looking for:</strong></p>
                <ul>
                    <li>info</li>

                </ul>

                <p><strong>Bonus points:</strong></p>
                <ul>
                    <li>info</li>
                </ul>


            </div>
        </div>
        <!-- //END -->

    </div>
</div>