Question

我一直在研究一些基于切换的按钮。我有两个按钮，一个是买，另一个是演示。我已经设法为切换编写了一些jQuery代码。一切都工作正常，除非我点击单个按钮，它们都被切换。但我只希望其中一个被切换。另一个小问题是，当我点击按钮时，正在播放一些奇怪的动画，我猜这是因为我使用了切换。这是Fiddle

＆＃13;

$(document).ready(function($) {
  $('.theme-options').find('#buy').click(function() {
    $('.buy span').toggle(200);
  });

  $('.theme-options').find('#demo').click(function() {
    $('.demo span').toggle(200);
  });
});

＆＃13;

body { position: relative; }
.theme-options {
  position: fixed;
  right: 0;
  top: 40px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.theme-options span {
  display: flex;
  align-items: center;
}
.buy,
.demo {
  padding: 20px 10px;
  display: block;
}
.buy span,
.demo span {
  display: none;
}
a {
  text-decoration: none;
  color: #000;
  text-transform: uppercase;
}

＆＃13;

<div class="theme-options">
  <span id="buy">User
<a href="#" class="buy theme">
  <span>Want to buy this theme</span>
  </a>
  </span>
  <span id="demo">User
<a href="#" class="demo theme">
  <span>Want to request a demo</span>
  </a>
  </span>
</div>

＆＃13;

Answer 1

这是由于theme-options类占用宽度，它适用于这两个元素，所以两者都会继续切换，你可以将它们分成不同的div并应用这个

＆＃13;

$(document).ready(function($) {
    $('.theme-options').find('#buy').click(function(){

      $('.buy span').toggle(500);

    });
    
      $('.theme-options2').find('#demo').click(function(){

      $('.demo span').toggle(500);

    });
  });

＆＃13;

body {
  position: relative;
}
.theme-options {
  position: fixed;
  right: 0px;
  top: 40px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.theme-options span {
  display: flex;
  align-items: center;
}
.theme-options2 {
  position: fixed;
  right: 0px;
  top: 80px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.theme-options2 span {
  display: flex;
  align-items: center;
}
.buy, .demo {
  padding: 20px 10px;
  display: block;
}
.buy span {
 display: none;
}
.demo span {
 display: none;
}
a {
  text-decoration: none;
  color: #000;
  text-transform: uppercase;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="theme-options">
<span id="buy">User
<a href="#" class="buy theme">
  <span>Want to buy this theme</span>
  </a>  
</span>
</div>
<div class="theme-options2">
<span id="demo">User
<a href="#" class="demo theme">
  <span>Want to request a demo</span>
  </a>  
</span>
</div>

＆＃13;

Answer 2

CSS

body {
    position: relative;
}

.theme-options {
    position: fixed;
    height: 40px;
    right: 0;
    top: 40px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

    .theme-options span {
        display: flex;
        align-items: center;
    }

.theme-options1 {
    position: fixed;
    height: 40px;
    right: 0;
    top: 80px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

    .theme-options1 span {
        display: flex;
        align-items: center;
    }

.buy, .demo {
    padding: 20px 10px;
    display: block;
}

    .buy span, .demo span {
        display: none;
    }

a {
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
}

<强> JS

$(document).ready(function ($) {
    $('.theme-options').find('#buy').click(function () {
        $('.buy span').toggle(200);
    });

    $('.theme-options1').find('#demo').click(function () {
        $('.demo span').toggle(200);
    });
});

<强> HTML

<div class="theme-options">
    <span id="buy">User
        <a href="#" class="buy theme">
            <span>Want to buy this theme</span>
        </a>
    </span>
</div>
<div class="theme-options1">
    <span id="demo">User
        <a href="#" class="demo theme">
            <span>Want to request a demo</span>
        </a>
    </span>
</div>

Fiddle

Answer 3

你可以尝试这种方式

＆＃13;

$('#buy,#demo').click(function(){
        $(this).find('span').fadeToggle(300);
    });

＆＃13;

body {
  position: relative;
}
.theme-options {
  position: fixed;
  right: 0;
  top: 40px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.theme-options:nth-of-type(2) {
	top: 90px;
}
.theme-options span {
  display: flex;
  align-items: center;
}
.buy, .demo {
  padding: 20px 10px;
  display: block;
}
.buy span, .demo span {
 display: none;
}
a {
  text-decoration: none;
  color: #000;
  text-transform: uppercase;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="theme-options">
<span id="buy">User
<a href="#" class="buy theme">
  <span>Want to buy this theme</span>
  </a>  
</span>

</div>
<div class="theme-options">
<span id="demo">User
<a href="#" class="demo theme">
  <span>Want to request a demo</span>
  </a>  
</span>
</div>

＆＃13;

Answer 4

    $(document).ready(function($) {
      $('.theme-options').find('#buy').click(function(){

        $('.buy span').toggle(200);
        if($('.demo span').css('display') == 'inline'){
          $('.demo span').toggle(200);
        }

      });

        $('.theme-options').find('#demo').click(function(){

        $('.demo span').toggle(200);
        if($('.buy span').css('display') == 'inline'){
          $('.buy span').toggle(200);
        }
      });
    });

这是你想要的吗？你需要判断另一个项目是否正在扩展

onClick仅切换选定的元素

4 个答案: