我一直在研究一些基于切换的按钮。我有两个按钮,一个是买,另一个是演示。我已经设法为切换编写了一些jQuery代码。一切都工作正常,除非我点击单个按钮,它们都被切换。但我只希望其中一个被切换。另一个小问题是,当我点击按钮时,正在播放一些奇怪的动画,我猜这是因为我使用了切换。这是Fiddle
$(document).ready(function($) {
$('.theme-options').find('#buy').click(function() {
$('.buy span').toggle(200);
});
$('.theme-options').find('#demo').click(function() {
$('.demo span').toggle(200);
});
});

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;
}

<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;
答案 0 :(得分:1)
这是由于theme-options类占用宽度,它适用于这两个元素,所以两者都会继续切换,你可以将它们分成不同的div并应用这个
$(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;
答案 1 :(得分:1)
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>
答案 2 :(得分:1)
你可以尝试这种方式
$('#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;
答案 3 :(得分:1)
$(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);
}
});
});
这是你想要的吗? 你需要判断另一个项目是否正在扩展