我是jquery的新手。但我需要一些帮助。我想隐藏并在jquery中显示按钮。
我有3个按钮，但是当我点击一个按钮时，我只想显示一个按钮，而不是其他2个按钮。
input[type="file"] {
display: none;
}
.custom-file-upload {
background:#edeef0;
color: #2b2c31;
font-size:18px;
width:170px;
padding:12px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border:1px solid #fff;
cursor:pointer;
}
.social_button_area{
width:130px;
padding:10px;
font-size: 18px;
border:1px solid #fff;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height:52px;
cursor:pointer;
background:#edeef0;
color: #2b2c31;
}
.social_text_area{
width: 100%;
height:120px;
border:1px solid #fff;
color: #0f366b;
resize: none;
}
#musicinfo {
display: none;
}
#audioinfo {
display: none;
} <div align="center">
<form name="fileField" action="story_action.php" method="post" enctype="multipart/form-data">
<div class="top_attach_sub top_attach_sub_mobile" align="right">
<div align="right">
<div style="float:right; padding:5px;">
<button id="Flow" name="Submit" type="submit" class="social_button_area" title=" Share Your Flow ">
<i class="fa fa-share-alt-square"></i> Flow
</button>
</div>
<div style="float:right; padding:5px;">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-picture-o"></i> Upload Photo
</label>
<input id="file-upload" type="file" name="photo"/>
</div>
<div style="float:right; padding:5px;">
<button id="audio" name="Submit" type="button" class="social_button_area" title=" Add Audio ">
<i class="fa fa-volume-up"></i> Add Audio
</button>
</div>
<div style="float:right; padding:5px;">
<button id="music" name="Submit" type="button" class="social_button_area" title=" Add Video ">
<i class="fa fa-youtube-play"></i> Add Video
</button>
</div>
</div>
</div>
</div>
</div>
<div class="small-12 columns">
<div class="top_attach_sub" align="center" style="height:130px; width:100%;">
<textarea name="dessc" class="social_text_area" placeholder="Flow your thinking"></textarea>
</div>
</div>
<div id="audioinfo" class="audio_mobile">
<div class="small-12 columns">
<div class="top_attach_sub" align="center" style="height:50px; width:100%;">
<input name="c_aud" type="text" class="social_text_area" value="" placeholder="Enter Clyp Audio Url. Example : https://clyp.it/e1bn0tsz ">
</div>
<div align="center" style="background:#FFFFFF;">
<p class="help" style="padding:5px;">
1. Login your Clyp Account . or <a href="https://clyp.it/#signup" target="_blank">Click Here</a>
</br>
2. Upload Your Audio Song using upload button .
</br>
3. Choose Your Audio FIle than Wait for upload
</br>
4. After upload fill up the basic Title and Description of this audio.
</br>
5. Than click Save.
</br>
6. Copy the url of the song . <storng>(Example : https://clyp.it/eosdmbmg)</storng> from the address bar of your browser.
</br>
7. Copy the url and paste the below text field.Thanks.
</p>
</div>
</div>
</div>
<div id="musicinfo">
<div class="small-12 columns">
<div class="top_attach_sub" align="center" style="height:50px; width:100%;">
<input name="y_vid" type="text" class="social_text_area" value="" placeholder="Enter Youtube Video Url. Example : https://www.youtube.com/watch?v=ZeIXjV0LWnA ">
</div>
<div align="center" style="background:#FFFFFF;">
<p class="help" style="padding:5px;">
1. Go to Youtube . or <a href="https://youtube.com" target="_blank">Click Here</a>
</br>
2. Open a video which you want to share our flow.
</br>
3. Copy the youtube url.
</br>
4. Paste it into the box.
</br>
5. Than Press flow.
</br>
</p>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$('button,input[type="file"]').click(function(e){
if(e.target.tagName=='INPUT')
$('button,input[type="file"]').not($(this)).toggle();
else{
$('button').not($(this)).toggle();
$('input[type="file"]').closest('div').toggle();
}
});
$(document).ready(function(){
$("#file-upload").on('change',function(){
//do whatever you want
alert("Photo Selected.");
});
});
$(document).ready(
function() {
$("#music").click(function() {
$("#musicinfo").fadeToggle();
});
});
$(document).ready(
function() {
$("#audio").click(function() {
$("#audioinfo").fadeToggle();
});
});
</script>
事实上，在那之后显示所有三个按钮，
如果点击上传照片
隐藏：添加视频和添加音频
如果点击添加视频
隐藏：上传照片和添加音频
如果单击“添加音频” 隐藏：上传照片和添加视频
但是流量按钮永远不会隐藏，因为它的帖子按钮。
感谢所有人。
答案 0 :(得分：1)
您应该将.toggle()方法与.not()方法结合使用。
$('button[type="button"],input[type="file"]').click(function(e){
if(e.target.tagName=='INPUT')
$('button,input[type="file"]').not($(this)).not($('button[type="submit"]')).toggle();
else{
$('button').not($(this)).not($('button[type="submit"]')).toggle();
$('input[type="file"]').closest('div').toggle();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center">
<div style="float:right; padding:5px;">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-picture-o"></i> Upload Photo
</label>
<input id="file-upload" type="file" name="photo"/>
</div>
<div style="float:right; padding:5px;">
<button id="audio" name="Submit" type="button" class="social_button_area" title=" Add Audio ">
<i class="fa fa-volume-up"></i> Add Audio
</button>
</div>
<div style="float:right; padding:5px;">
<button id="music" name="Submit" type="button" class="social_button_area" title=" Add Video ">
<i class="fa fa-youtube-play"></i> Add Video
</button>
</div>
<button type="submit">Submit</button>
</div>
答案 1 :(得分：1)
请告诉我这是否有效：
$(document).ready(function() {
$("#active").hide();
$(".custom-file-upload").click(function() {
$("#audio").hide();
$("#music").hide();
$("#active").show();
});
$("#audio").click(function() {
$(".custom-file-upload").hide();
$("#music").hide();
$("#active").show();
});
$("#music").click(function() {
$("#audio").hide();
$(".custom-file-upload").hide();
$("#active").show();
});
$("#active").click(function() {
$("#audio").show();
$(".custom-file-upload").show();
$("#music").show();
$("#active").hide();
});
}); input[type="file"]
{
display: none;
}
.custom-file-upload
{
background: #edeef0;
color: #2b2c31;
font-size: 18px;
width: 170px;
padding: 12px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid #fff;
cursor: pointer;
}
.social_button_area
{
width: 130px;
padding: 10px;
font-size: 18px;
border: 1px solid #fff;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 52px;
cursor: pointer;
background: #edeef0;
color: #2b2c31;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div align="center">
<div style="float: right; padding: 5px;">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-picture-o"></i>Upload Photo
</label>
<input id="file-upload" type="file" name="photo" />
</div>
<div style="float: right; padding: 5px;">
<button id="audio" name="Submit" type="button" class="social_button_area" title=" Add Audio ">
<i class="fa fa-volume-up"></i>Add Audio
</button>
</div>
<div style="float: right; padding: 5px;">
<button id="music" name="Submit" type="button" class="social_button_area" title=" Add Video ">
<i class="fa fa-youtube-play"></i>Add Video
</button>
</div>
</div>
<div style="float: right; padding: 5px;">
<button id="active" name="Submit" type="button" class="social_button_area" title=" Show All Buttons!!! ">
<i class="fa fa-youtube-play"></i>Active
</button>
</div>
</div>
答案 2 :(得分：1)
希望这是你想要的。
$(document).ready(function()
{
$('.social_button_area, .custom-file-upload').click(function()
{
$('.social_button_area, .custom-file-upload').not(this).hide();
})
});input[type="file"] {
display: none;
}
.custom-file-upload {
background:#edeef0;
color: #2b2c31;
font-size:18px;
width:170px;
padding:12px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border:1px solid #fff;
cursor:pointer;
}
.social_button_area{
width:130px;
padding:10px;
font-size: 18px;
border:1px solid #fff;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height:52px;
cursor:pointer;
background:#edeef0;
color: #2b2c31;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center">
<div style="float:right; padding:5px;">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-picture-o"></i> Upload Photo
</label>
<input id="file-upload" type="file" name="photo"/>
</div>
<div style="float:right; padding:5px;">
<button id="audio" name="Submit" type="button" class="social_button_area" title=" Add Audio ">
<i class="fa fa-volume-up"></i> Add Audio
</button>
</div>
<div style="float:right; padding:5px;">
<button id="music" name="Submit" type="button" class="social_button_area" title=" Add Video ">
<i class="fa fa-youtube-play"></i> Add Video
</button>
</div>
</div>