Я пытаюсь показать некоторые дивы по конкретной ссылке нажмите - PullRequest
0 голосов
/ 23 июня 2009

Моя задача на этот вечер состоит в том, чтобы показать и скрыть div (в конечном итоге два div или больше на самом деле) при нажатии на ссылку из главной навигации. Это тогда скроет div, когда они нажимают на другую часть главной навигации.

СОВЕРШЕНО

Спасибо всем, особенно .. Мату ....

код теперь как показано ниже и работает ....

<script type="text/javascript">
$(document).ready(function(){
        $("#tagcloud").hide();
            blogLink = $("ul.mainnav li.blog a").click(function () {    
            $("#tagcloud").show();});$("ul.mainnav li a").not       (blogLink).click(function () {    
            $("#tagcloud").hide();});      

            });
</script>

Если кто-то может увидеть какие-либо возможные проблемы с этим, пожалуйста, сообщите мне об этом по адресу www.alwaystwisted.com/index.html ....

Кроме того, я только что заказал книгу JQuery 1.3 ... так что, надеюсь, немного лучше расскажу об этом ...

привет

Sty

Ответы [ 5 ]

1 голос
/ 23 июня 2009

Обновлено третье время для последней загрузки!

Играя со страницей, которую вы мне дали, вот что я мог сделать в консоли Firebug, прежде чем вы переключили tagcloud на класс:

blogLink = $("ul.mainnav li.blog a").click(function () {
    $("#tagcloud").show();
});
$("ul.mainnav li a").not(blogLink).click(function () {
    $("#tagcloud").hide();
});

Дайте этому попробовать:)

А насчет "использовать класс, а не ID", это было до того, как я увидел, что вы на самом деле пытались сделать. Вы должны использовать ID, если есть только один экземпляр - извините за путаницу!

0 голосов
/ 23 июня 2009

Вероятно, проблема в пузыре события от элемента li до контейнера ul. Я немного незнаком с jQuery, но если он передает прямые DOM-события без его изменения (что я сомневаюсь в этом, поскольку автор jQuery скорее против изменения существующих объектов), то я бы рекомендовал не использовать только protectDefault () не поддерживается всеми браузерами. В вашем инструментальном поясе должен быть метод для остановки событий и предотвращения пузырей, например,

function stopEvent(event){
   event.preventDefault();
   event.stopPropagation();
   event.stopped = true;
}
0 голосов
/ 23 июня 2009

Я пойду: ваш обработчик click на li.blogcontent всплывает до ul.mainnav и выполняет также обработчик click.

<script type="text/javascript">
$(document).ready(function(){
    $('li.blogcontent').click(function(e) { 
        e.stopPropagation();   // Stop the bubbling up to its parent
        $("#tagcloud").show();
    });
    $('ul.mainnav').click(function() {
        $("#tagcloud").hide(); 
    });                            
});
</script>

или используя делегирование событий и всплывающие сообщения (которые я не проверял, но должен быть близок):

<script type="text/javascript">
$(document).ready(function(){
    $('ul.mainnav').click(function(e) {
        var target = $(e.target);
        if(target.hasClass('blogcontent')){
            $("#tagcloud").show();
        }
        else{
            $("#tagcloud").hide(); 
        }
    });                            
});
</script>
0 голосов
/ 23 июня 2009

Помимо синтаксических ошибок, уже упомянутых в этой теме, вам, вероятно, потребуется вернуть false; при переходе по этой ссылке, в противном случае ваше действие будет выполнено, и ссылка все равно будет отправлена ​​куда угодно.

Конечно, это открывает дверь в аргументе доступности. Я бы скорее получил рабочее демо, прежде чем беспокоиться об этом аспекте.

0 голосов
/ 23 июня 2009

Я не уверен, что понимаю вашу цель здесь, не видя также HTML, но только пару вещей, которые вы могли бы проверить в первую очередь.

  • $ ('ul.mainnav) ... Вам нужно закрыть эту строку
  • $ (this) .next ("# tagcloud") ... Вы можете просто использовать $ ("# tagcloud"), поскольку на странице должны быть уникальные идентификаторы.

Если вы разместите еще немного кода, который может помочь людям.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...