Question

好的，只是为了警告你，我几乎不知道javascript和jquery，我现在只需要这两个按钮。（例如，我将jquery放入不同的脚本中，因为我不确定是否可以将它们放在同一个脚本中[我的html中有jquery / javascript]）

无论如何，我的问题是，当其他类处于活动状态时，我无法让我的span元素返回到单击父元素之前的状态。如果您在打开另一个下拉表单之前没有关闭其中一个下拉表单，最终会使箭头的方向错误。

ps - 你不需要查看整个代码片段（只是jquery和html），除非我做错了。

pps - 如果您查看了该片段，我知道我的代码很乱。

＆＃13;

$('#login-trigger').click(function() {
  $(this).next('#login-content').slideToggle();
  $(this).toggleClass('active');
  $('#signup-trigger.active').removeClass('active');


  if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
  else $(this).find('span').html('&#x25BC;');

  $(this).parent().siblings().children().next().slideUp();
  return false;
});



$('#signup-trigger').click(function() {
  $(this).next('#signup-content').slideToggle();
  $(this).toggleClass('active');
  $('#login-trigger.active').removeClass('active');


  if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
  else $(this).find('span').html('&#x25BC;');

  $(this).parent().siblings().children().next().slideUp();
  return false;
});

＆＃13;

nav {
  margin-top: 10px;
  margin-right: 30px;
}
nav ul {
  top: 0;
  right: 0;
  margin: 10px 1% 10px 5px;
  padding: 0;
  list-style: none;
  position: absolute;
  float: right;
  background: #939393;
  border-bottom: 1px solid #fff;
  border-radius: 3px;
  display: inline-block;
}
nav li {
  float: left;
}
nav #login {
  border-right: 1px solid #ddd;
  box-shadow: 1px 0 0 #fff;
}
nav #login-trigger {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
  padding: 0 8px;
  text-decoration: none;
  color: #3E8EC4;
}
nav #login-trigger {
  border-radius: 3px 0 0 3px;
}
nav #login-trigger:hover,
nav #login .active {
  background: #FFFFFF;
}
nav #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;
  background: #FFFFFF;
  background-image: linear-gradient(top, #fff, #eee);
  padding: 6px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9);
  border-radius: 3px 0 3px 3px;
}
nav li #login-content {
  right: 0;
  width: 264px;
}
/*--------------------*/

#inputs input {
  background: #f1f1f1;
  padding: 6px 5px;
  margin: 0 0 5px 0px;
  width: 234px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 1px #ccc inset;
}
#inputs input:focus {
  background-color: #fff;
  border-color: #e8c291;
  outline: none;
  box-shadow: 0 0 0 1px #e8c291 inset;
}
#inputs label {
  width: 150px;
  display: inline-block;
}
#inputs label input {
  display: inline-block;
  width: 13px;
  margin: auto 1px;
  vertical-align: middle;
}
/*--------------------*/

#login #actions {
  margin: 10px 0 0 0;
  padding-left: 6px;
  padding-right: 6px;
}
#login #submit2 {
  background-color: #d14545;
  background-image: linear-gradient(top, #e97171, #d14545);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  border: 1px solid #7e1515;
  float: left;
  height: 30px;
  padding: 0;
  width: 100px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;
}
#login #submit2:hover,
#login #submit2:focus {
  background-color: #e97171;
  background-image: linear-gradient(top, #d14545, #e97171);
}
#login #submit2:active {
  outline: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#login #submit2::-moz-focus-inner {
  border: none;
}
#login label {
  float: right;
  line-height: 30px;
}
#login label input {
  position: relative;
  top: 2px;
  right: 2px;
}
/*--------------------*/

nav #signup {
  border-right: 1px solid #ddd;
  box-shadow: 1px 0 0 #fff;
}
nav #signup a {
  border-radius: 0 3px 3px 0;
}
nav #signup-trigger {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
  padding: 0 8px;
  text-decoration: none;
  color: #3E8EC4;
}
nav #signup-trigger {
  border-radius: 3px 0 0 3px;
}
nav #signup-trigger:hover,
nav #signup .active {
  background: #FFFFFF;
}
nav #signup-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;
  background: #FFFFFF;
  background-image: linear-gradient(top, #fff, #eee);
  padding: 6px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9);
  border-radius: 3px 0 3px 3px;
}
nav li #signup-content {
  right: 0;
  width: 264px;
}
#signup #actions {
  margin: 10px 0 0 0;
  padding-left: 6px;
  padding-right: 6px;
}
#signup #submit2 {
  background-color: #d14545;
  background-image: linear-gradient(top, #e97171, #d14545);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  border: 1px solid #7e1515;
  float: left;
  height: 30px;
  padding: 0;
  width: 150px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;
  margin-left: 50px;
}
#signup #submit2:hover,
#signup #submit2:focus {
  background-color: #e97171;
  background-image: linear-gradient(top, #d14545, #e97171);
}
#signup #submit2:active {
  outline: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#signup #submit2::-moz-focus-inner {
  border: none;
}
#signup label {
  float: right;
  line-height: 30px;
}
#signup label input {
  position: relative;
  top: 2px;
  right: 2px;
}
nav a {
  text-decoration: none;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0 5px 5px 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <ul>
    <li id="login">
      <a id="login-trigger" href="#">
        Log in <span>▼</span>
      </a>
      <div id="login-content">
        <form>
          <fieldset id="inputs" style="padding-right: 6px; padding-left: 6px; padding-top: 10px;">
            <input id="username" type="email" name="Email" placeholder="Your email address" required>
            <input id="password" type="password" name="Password" placeholder="Password" required>
          </fieldset>
          <fieldset id="actions">
            <input type="submit" id="submit2" value="Log in">
            <label>
              <input type="checkbox" checked="checked">Keep me signed in</label>
          </fieldset>
        </form>
      </div>
    </li>
    <li id="signup">
      <a id="signup-trigger" href="#">
        Sign Up <span>▼</span>
      </a>
      <div id="signup-content">
        <form>
          <fieldset id="inputs" style="padding-right: 6px; padding-left: 6px; padding-top: 10px;">
            <input id="username" type="email" name="Email" placeholder="Your email address" required>
            <input id="password" type="password" name="Password" placeholder="Password" required>
          </fieldset>
          <fieldset id="actions">
            <input type="submit" id="submit2" value="signup">
          </fieldset>
        </form>
      </div>
    </li>
  </ul>
</nav>

＆＃13;

Answer 1

像这样，经典的触发器，添加一个，删除另一个。

 $('#login-trigger').click(function(event) {
     event.preventDefault();
    var other = $('#signup-trigger'); //adding this makes it more readable and caches the jQuery object for a teeny tiny speed improvement 

    //slide this content down
    $(this).next('#login-content').slideDown();
    //slide that content up
    $('#signup-content').slideUp();

    //add to this
    $(this).addClass('active');
    //remove from that
    other.removeClass('active');

    if ($(this).hasClass('active')){
        $(this).find('span').html('&#x25B2;');
        other.find('span').html('&#x25BC;');//< swap the other link's arrow!
    }else{
        $(this).find('span').html('&#x25BC;');
         other.find('span').html('&#x25B2;');
    }
    return false;
});

$('#signup-trigger').click(function(event) {
    event.preventDefault();
    var other = $('#login-trigger');
    //slide this content down
    $(this).next('#signup-content').slideDown();
    //slide that content up
    $('#login-content').slideUp();

    //add to this
    $(this).addClass('active');
    //remove from that
    other.removeClass('active');

    if ($(this).hasClass('active')){
        $(this).find('span').html('&#x25B2;');
        other.find('span').html('&#x25BC;'); 
    }else{
        $(this).find('span').html('&#x25BC;');
         other.find('span').html('&#x25B2;');
    }
    return false;
 });

我假设这个

 $(this).parent().siblings().children().next().slideUp();

与（但相反）

当课程不活跃时如何获得范围重置？

1 个答案: