更新

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以供参考。由于某些原因，我的小提琴中，加号并没有旋转，但在我正在使用的完整文档中，它确实如此。

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>

Answer 2

更新

OP请求：

在文档上的任何位置单击时，删除它关闭下拉列表的行为。
旋转＆＃39; +＆＃39;位于＆＃39; x＆＃39;

jsFiddle最近一直很笨，我不确定是否有人注意到了，所以我在Plunker上移动了这个新的演示。

http://plnkr.co/edit/l9MPtQiafHDUTu8VpgOb?p=preview

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <style>
    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
    }
    h3:hover * {
      color: #00DC73
    }
    h3 a:active,
    h3 .plus:active {
      transform: rotateZ(45deg);
    }
    .job {
      border-bottom: 1px solid #191919;
      padding-bottom: 15px
    }
    .job .drop {
      display: none;
      margin-top: 20px
    }
    .job .drop.active {
      display: block;
      margin-top: 20px
    }
    .title {
      position: relative;
    }
    .plus {
      line-height: 16px;
      width: 16px;
      pointer-events: none;
      cursor: pointer;
    }
    .rotateOn {
      position: absolute;
      -ms-transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg);
      -ms-transform-origin: bottom center;
      -webkit-transform-origin: bottom center;
      transform-origin: bottom center;
    }
  </style>
</head>

<body>
  <div class="container">
    <main class="main">
      <section class="job" id="j1">
        <h3 class="title"><a href="#">Job 1</a><span class="plus">+</span></h3>
        <div class="drop">
          <p>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>
      </section>
      <!-- //END -->

      <section class="job" id="j2">
        <h3 class="title"><a href="#">Job 2</a><span class="plus">+</span></h3>
        <div class="drop">
          <p>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>
      </section>
      <!-- //END -->
    </main>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $('.title').click(function(e) {
      var that = $(this);
      e.preventDefault();
      that.siblings('.drop').toggleClass('active');
      that.children('.plus').toggleClass('rotateOn');
    });
  </script>
</body>

</html>

＆＃13;

单击整个文档后，您删除了.active类。

https://jsfiddle.net/zer00ne/duLc8bnm/

改变这个：

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

到此：

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

在一个元素上切换两个类，而不切换兄弟元素

2 个答案:

更新