присоединение JQuery скриптов

Question

Я использую JQuery для создания горизонтального аккордеонного меню (на основе учебного пособия Design Reviver . У меня оно работает хорошо, но мне нужно добавить второе горизонтальное аккордеонное меню, как оно на той же странице. Я уверен, что это можно сделать, но я не знаю, как настроить скрипт в разделе head, чтобы оба меню работали одновременно. Я экспериментировал с кодом, но безуспешно далеко.

Меню основано на неупорядоченном списке, и первый элемент списка имеет якорный тег с id="a1", так что для начала можно сказать, что он «открыт» (в то время как другие пункты меню выглядят «свернутыми») ,

Каждое меню находится внутри div-оболочки, первое имеет class="jq_menu", а второе - class="jq_menu2".

В настоящее время у меня есть следующий код в разделе заголовка моей страницы. Оба меню появляются на странице, но только в первом работает скользящая анимация. Любой совет высоко ценится! Спасибо.

<script src="javascript/jquery-1.2.3.js"
type="text/javascript"></script>

<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60;  

$(".jq_menu ul li a").hover(
  function(){
    $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlock = this;
  }
);

});

</script>

<script type="text/javascript" >
$(document).ready(function(){
var lastBlockB = $("#a2");
var maxWidthB = 180;
var minWidthB = 60; 

$(".jq_menu2 ul li a").hover(
  function(){
    $(lastBlockB).animate({width: minWidthB+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidthB+"px"}, { queue:false, duration:200});
lastBlockB = this;
  }
);

});

</script>

Answer 1

Функция ready() срабатывает, когда DOM зарегистрирован браузером. Так будет называться только один раз. Избавьтесь от второго блока JavaScript и включите код для второго меню в функцию $(document).ready() первого блока.

Answer 2

Большое спасибо всем, кто помог мне здесь. Когда я добавил второй параметр для mouseoff, оба моих меню изображения начали скользить, и одно изображение всегда остается открытым из каждого меню - как я и хотел!

(Интересно, что когда я удалил селектор jQuery из $ (lastBlock) .animate и т. Д., Он нарушил функционал. Не уверен, почему это так, но очень рад, что он все равно работает с селектором.)

Я включил окончательный код ниже на случай, если он кому-нибудь поможет:)

<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60; 

var lastBlockB = $ ("# a2");

$(".jq_menu ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlock = this;
}, 
function(){ /*do this when they remove their mouse*/ }

);

$(".jq_menu2 ul li a").hover(
function(){
$(lastBlockB).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlockB = this;
}, 
function(){ /*do this when they remove their mouse*/ }
);

});

</script>

Когда сайт заработает, я опубликую ссылку, чтобы люди могли увидеть эффект в действии.

Answer 3

[Изменить] Я думаю, что ваша главная проблема может заключаться в том, что у вас есть только половина функции наведения. функция hover принимает два параметра: что делать с mouseon и что делать с mouseoff.

$(thing).hover(
      function(){ /*do this when they hover over*/ }, //<---- don't forget that comma
      function(){ /*do this when they remove their mouse*/ }
);

Когда вы объявляете lastBlock как объект jQuery:

var lastBlock = $("#a1");

Вам не нужно позже вызывать его в селекторе jQuery.

Bad

$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });

Хорошо

lastBlock.animate({width: minWidth+"px"}, { queue:false, duration:200 });

Answer 4

Спасибо за предложения. Основываясь на ответе от mplusz, я получил следующий код. На данный момент ни одно из меню не имеет анимированного скользящего действия. Может ли это быть проблемой с моим синтаксисом? В противном случае я не знаю, как объединить функции наведения из-за разных классов div (jq_menu2 и jq_menu) и разных имен переменных (lastBlock, lastBlockB и т. Д.).

<script type="text/javascript" >
$(document).ready(function(){
    var lastBlock = $("#a1");
    var maxWidth = 180;
    var minWidth = 60;  
var lastBlockB = $("#a2");
    var maxWidthB = 180;
    var minWidthB = 60; 

$(".jq_menu ul li a").hover(
  function(){
    $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlock = this;
  }
);

}

$(".jq_menu2 ul li a").hover(
  function(){
    $(lastBlockB).animate({width: minWidthB+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidthB+"px"}, { queue:false, duration:200});
lastBlockB = this;
  }
);

});

</script>

Answer 5

Вы можете использовать функцию map

['jq_menu', 'jq_menu2'].map(function(n){
    $("." + n + " ul li a").hover(
        function(){
            $(lastBlockB).animate({width: minWidthB+"px"}, { queue:false, duration:200 });
            $(this).animate({width: maxWidthB+"px"}, { queue:false, duration:200});
            lastBlockB = this;
        }
    );
})