Показать/скрыть элементы jQuery

Question

Я новичок в jQuery и немного помогу с чем-то!

Вот некоторые из моего кода ниже:

---

HTML

<a id="showHideMenu">Discover...</a> 
<a id="showHideContact">Contact</a> 

JQuery

$(document).ready(function(){ 
    $("#showHideMenu").click(function(){ 
     $("#subMenuHere").toggle(); 
    }); 
}); 

$(document).ready(function(){ 
    $("#showHideContact").click(function(){ 
     $("#contactFormHere").toggle(); 
    }); 
}); 

---

На данный момент, если вы выберете «Discover ...», появится меню, и если вы выберете «Контакт», появится контактная форма. Однако я бы хотел, чтобы он работал так, если меню отображается, и вы нажимаете «Контакт», меню скрывается, а затем отображается контакт.

Дайте мне знать, если вам нужна дополнительная информация!

Благодаря

FIDDLE

Answer 1

Не требуется мультипликатор document.ready, использовать только один в одном HTML-страницы.

чтобы показать/скрыть меню и использовать нижеследующий запрос.

$(document).ready(function(){ 
    $("#showHideMenu").click(function(){ 
     $("#contactFormHere").hide(); 
     $("#subMenuHere").toggle(); 

    }); 

    $("#showHideContact").click(function(){ 
     $("#subMenuHere").hide(); 
     $("#contactFormHere").toggle(); 
    }); 
}); 

Answer 2

Вам просто нужно добавить .hide(); к элементу вы хотите скрыть :)

$(document).ready(function(){ 
    $("#showHideMenu").click(function(){ 
     $("#contactFormHere").hide(); 
     $("#subMenuHere").toggle(); 

    }); 
}); 

$(document).ready(function(){ 
    $("#showHideContact").click(function(){ 
     $("#subMenuHere").hide(); 
     $("#contactFormHere").toggle(); 
    }); 
}); 

Answer 3

Ваш вопрос непонятен, и вам не нужно дублировать $ (документ) .ready();

$(document).ready(function(){ 
    $("#showHideMenu").click(function(){ 
     $("#subMenuHere").toggle(); 
    }); 
    $("#showHideContact").click(function(){ 
     $("#contactFormHere").toggle(); 
    }); 

}); 

Answer 4

Если это важно, что один меню закрывается перед другими открывается, вам нужно использовать что-то вроде:

$(document).ready(function(){ 
    $("#showHideMenu").click(function(){ 
     if ($("#contactFormHere").is(":visible")) { // checks to see if the other element is visible 
      $("#contactFormHere").toggle(400, function() { 
       $("#subMenuHere").toggle(); 
      }); 
     } else { 
      $("#subMenuHere").toggle(); 
     } 
    }); 

    $("#showHideContact").click(function(){ 
     if ($("#subMenuHere").is(":visible")) { 
      $("#subMenuHere").toggle(400, function() { 
       $("#contactFormHere").toggle(); 
      }); 
     } else { 
      $("#contactFormHere").toggle(); 
     } 
    }); 
});