Question

只是想知道是否有人可以帮助使用这个CodePen，我已经尝试使用JQuery .each方法干掉代码而没有快乐，这是1到7行。

这是我的代码：

HTML：

<section class="top-bar cf">
  <div class="container">
    <div class="left">
        Left
    </div><!-- .left -->

    <div class="right">
      <span href="#" class="button darkblue toggle-tester">
        Tester
      </span><!-- .button .toggle-tester --> 

      <div class="tester">
        <div class="triangle"></div><!-- .triangle -->
          <div class="test-box">
            Hello, I'm a box, yo!
          </div><!-- .test-box -->
      </div><!--  .tester -->


      <span href="#" class="button blue toggle-login">
        Login
      </span><!-- .button .toggle-login --> 

      <div class="login">
        <div class="triangle"></div><!-- .triangle -->
        <form>
          <div class="field-title">Email:</div><!-- .field-title -->
          <input type="email" placeholder="Email Address" />
          <div class="field-title">Password:</div><!-- .field-title -->
          <input type="password" placeholder="Password" />
          <input type="submit" value="Login" />
        </form>
      </div><!--  .login -->
    </div><!-- .right -->
  </div><!-- .container -->
</section><!-- .tob-bar -->

CSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 600,700);

body{
  background: #fff;
  font-family: 'Open Sans',sans-serif;
  font-size: 13px;
  margin: 0;
  color: #272727;
}

.top-bar {
  background: #272727;
  color: #fff;
}

.container {
  width: 1000px;
  margin: auto;
}

.left, .right {
  float: left;
  width: 50%;
  position: relative;
}

.button{
  color: #fff;
  cursor: pointer;
  float: right;
  padding: 10px;
  text-align: center;
  transition: background .3s;
  width: 80px;
  -webkit-transition: background .3s;
}

.blue {
  background: #338fe0;
}

.blue:hover{
  background: #257ac4;
}

.darkblue {
  background: #014fbc;
}

.darkblue:hover{
  background: #2672d6;
}

.login{
  display:none;
  margin-bottom: 2%;
  margin-top: 42px;
  position: absolute;
  right: 0;
  margin-right: 100px;
  width: 260px;
}

.tester{
  display:none;
  margin-bottom: 2%;
  margin-top: 42px;
  position: absolute;
  right: 0;
  width: 260px;
}

.triangle{
  border-right: 12px solid transparent;
  border-bottom: 12px solid #338fe0;
  border-left: 12px solid transparent;
  margin-left: 200px;
  width: 0;
}

form, .test-box {
  background: #272727;
  border-top: 6px solid #338fe0;
  color: #fff;
  padding: 16px 12px;
}

input[type="email"],input[type="password"]{
  background: #fff;
  border: none;
  box-sizing: border-box;
  color: #555;
  margin-bottom: 12px;
  padding: 8px;
  width: 100%;
}

input[type="submit"]{
  background: #338fe0;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  padding: 10px 0;
  text-transform: uppercase;
  width: 100%;
}

input[type="submit"]:hover{
  background: #2288bb;
}

/* #Browser Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/** For IE 6/7 only - Include this rule to trigger hasLayout and contain floats. **/
.cf {
    *zoom: 1;
}

JQuery的：

$('.toggle-login').click(function(){
  $('.login').toggle();
});

$('.toggle-tester').click(function(){
  $('.tester').toggle();
});



$(document).mouseup(function (e){
    var container = $(".login, .tester");
    if (!container.is(e.target)
        && container.has(e.target).length == 0) 
    {
        container.fadeOut();
    }
});

以下是我当前CodePen的链接：http://codepen.io/nickelse/pen/PPWmzo

非常感谢，

尼克

Answer 1

这个怎么样？虽然有些硬编码。也许，将相应的目标类指定为按钮属性会更好。类似于data-target。

＆＃13;

$('.toggle-login, .toggle-tester').click(function(){
  $(this).next().toggle();
});


$(document).mouseup(function (e){
    var container = $(".login, .tester");
    if (!container.is(e.target)
        && container.has(e.target).length == 0) 
    {
        container.fadeOut();
    }
});

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 600,700);

body{
  background: #fff;
  font-family: 'Open Sans',sans-serif;
  font-size: 13px;
  margin: 0;
  color: #272727;
}

.top-bar {
  background: #272727;
  color: #fff;
}

.container {
  width: 1000px;
  margin: auto;
}

.left, .right {
  float: left;
  width: 50%;
  position: relative;
}

.button{
  color: #fff;
  cursor: pointer;
  float: right;
  padding: 10px;
  text-align: center;
  transition: background .3s;
  width: 80px;
  -webkit-transition: background .3s;
}

.blue {
  background: #338fe0;
}

.blue:hover{
  background: #257ac4;
}

.darkblue {
  background: #014fbc;
}

.darkblue:hover{
  background: #2672d6;
}

.login{
  display:none;
  margin-bottom: 2%;
  margin-top: 42px;
  position: absolute;
  right: 0;
  margin-right: 100px;
  width: 260px;
}

.tester{
  display:none;
  margin-bottom: 2%;
  margin-top: 42px;
  position: absolute;
  right: 0;
  width: 260px;
}

.triangle{
  border-right: 12px solid transparent;
  border-bottom: 12px solid #338fe0;
  border-left: 12px solid transparent;
  margin-left: 200px;
  width: 0;
}

form, .test-box {
  background: #272727;
  border-top: 6px solid #338fe0;
  color: #fff;
  padding: 16px 12px;
}

input[type="email"],input[type="password"]{
  background: #fff;
  border: none;
  box-sizing: border-box;
  color: #555;
  margin-bottom: 12px;
  padding: 8px;
  width: 100%;
}

input[type="submit"]{
  background: #338fe0;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  padding: 10px 0;
  text-transform: uppercase;
  width: 100%;
}

input[type="submit"]:hover{
  background: #2288bb;
}

/* #Browser Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/** For IE 6/7 only - Include this rule to trigger hasLayout and contain floats. **/
.cf {
    *zoom: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="top-bar cf">
  <div class="container">
    <div class="left">
        Left
    </div><!-- .left -->

    <div class="right">
      <span href="#" class="button darkblue toggle-tester">
        Tester
      </span><!-- .button .toggle-tester --> 

      <div class="tester">
        <div class="triangle"></div><!-- .triangle -->
          <div class="test-box">
            Hello, I'm a box, yo!
          </div><!-- .test-box -->
      </div><!--  .tester -->


      <span href="#" class="button blue toggle-login">
        Login
      </span><!-- .button .toggle-login --> 

      <div class="login">
        <div class="triangle"></div><!-- .triangle -->
        <form>
          <div class="field-title">Email:</div><!-- .field-title -->
          <input type="email" placeholder="Email Address" />
          <div class="field-title">Password:</div><!-- .field-title -->
          <input type="password" placeholder="Password" />
          <input type="submit" value="Login" />
        </form>
      </div><!--  .login -->
    </div><!-- .right -->
  </div><!-- .container -->
</section><!-- .tob-bar -->

＆＃13;

干燥JQuery按钮代码

1 个答案: