Это то, что я хотел бы выполнить. У меня есть кнопка div about us, которая открывает страницу о нас. Я хотел бы отключить кнопку div о нас, чтобы пользователи не могли на нее нажимать, если не закрыть страницу о нас с помощью кнопки закрытия. Пожалуйста, проверьте мою попытку ниже. После нажатия кнопки "закрыть" кнопку "div about us" больше не будет нажата.
Проверьте JSfiddle http://jsfiddle.net/jvaHb/
$(document).ready(function(e) {
$('#btn-social').click(function(){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.fade-container-' + this_item).fadeIn(2000);
$('#btn-social').off('click');
});
$('#btn-close-social').click(function(){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.fade-container-' + this_item).fadeIn(2000);
$('#btn-social').on('click');
});
$('#btn-close-about').click(function(){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.fade-container-' + this_item).fadeIn(2000);
$('#btn-about').on('click');
});
$('#btn-about').click(function(){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.fade-container-' + this_item).fadeIn(2000);
$('#btn-about').off('click');
});
});
.off('click')
отделяет все обработчики кликов от #btn-about
и #btn-social
когда кнопки нажимаются, а новый никогда не присоединяется. (В любом случае вы не хотите отсоединять их и снова присоединять).
Есть много способов решить эту проблему. Так как вы не хотите скрывать кнопку, один параметр состоит в том, чтобы просто иметь переменную, указывающую, следует ли кликать каждую кнопку...
$(document).ready(function(e) {
var isBtnSocialClickable = true;
$('#btn-close-social').click(function(){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.fade-container-' + this_item).fadeIn(2000);
isBtnSocialClickable = true;
});
$('#btn-social').click(function(){
if (isBtnSocialClickable) {
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.fade-container-' + this_item).fadeIn(2000);
isBtnSocialClickable = false;
}
});
var isBtnAboutClickable = true;
$('#btn-close-about').click(function(){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.fade-container-' + this_item).fadeIn(2000);
isBtnAboutClickable = true;
});
$('#btn-about').click(function(){
if (isBtnAboutClickable) {
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.fade-container-' + this_item).fadeIn(2000);
isBtnAboutClickable = false;
}
});
});
Другие способы сделать это - включить/отключить кнопки или добавить и удалить класс на кнопках и включить селектор событий onclick, чтобы он не срабатывал при удалении класса.
Вот код, который будет работать
HTML
<a href="#" class="btn_about">About Us</a>
<div id="content">About Us content
<div class="close"><a href="#">Close Button</a></div>
</div>
CSS
#content { display:none;}
Код
$('.btn_about').on('click', function(e){
e.preventDefault();
if( !$(this).is('.active') ){
alert('Hi');
$('#content').fadeIn();
$(this).addClass('active');
}
});
$('.close').click(function(){
$('#content').fadeOut();
$('.btn_about').removeClass('active');
});
Используйте preventDefault() и переменную btn в выражении if/else
$('#btn-close1').click(function(e){
if(btn === 'off'){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.fade-container-' + this_item).fadeIn(2000);
btn = 'on';
}else{
// Stops Default Button Action
e.preventDefault();
}
});
$('#btn-about').click(function(){
if(btn === 'on'){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.fade-container-' + this_item).fadeIn(2000);
btn = 'off';
}else{
// Stops Default Button Action
e.preventDefault();
}
});