Вертикальное меню/подменю с условиями jQuery

Я хочу, чтобы на мою существующую страницу были добавлены следующие условия. Кстати, в настоящее время все работает нормально, и его можно увидеть здесь вживую по адресу: http://www.ceramictilepro.com/Ceramic-Tile-And-Grout-Tips.php

1) При нажатии на ссылку выше на странице появится вертикальное меню/подменю, в котором будет видно только меню (в настоящее время все меню/подменю развернуты).

2) При нажатии на выбранное меню подменю расширяется и становится видимым (в настоящее время работает, поэтому здесь нет изменений)

3) При нажатии на подменю открывается новая страница. (в настоящее время это тоже работает)

4) здесь мне нужна помощь, я бы хотел, чтобы новая страница закрывала все остальные меню, кроме меню, в котором было нажато выбранное подменю.

примечание: выбранные ссылки выделены красным фоном для удобства навигации. (это остается прежним, здесь никаких изменений не требуется)

Вот скрипка

Вот текущий рабочий jQuery

$.each([1, 2, 3, 4, 5], function (index) {
$(".toggle" + index).click(function () {
    $(".submenu" + index).slideToggle("fast", function () {
        // Animation complete.
    });
});
});


$(function () {
$('a').each(function () {
    if ($(this).prop('href') == window.location.href) {
        $(this).addClass('_current_highlight_button');
    }
});
});
$(function () {
var split = window.location.pathname.split('/');
var mnurl = split[split.length - 1];
mnurl = '#';
$(' a[href="' + mnurl + '"]').addClass("_current_highlight_button");
}); // mnurl='.php goes here';

спасибо за любые предложения :)


person user2844139    schedule 15.10.2013    source источник
comment
можно ли использовать _current_highlight_button с jQuery как способ определения последней нажатой ссылки подменю? Если это так, то код должен держать это подменю открытым и закрывать другие. что ты думаешь? конечно, это основано на том, что все подменю должны быть закрыты по умолчанию.   -  person user2844139    schedule 15.10.2013
comment
Да, глядя на ваш живой сайт, я понял, что у вас уже есть метод выделения ссылки красным цветом. Я использовал тот же код, чтобы найти способ определить, какое подменю нужно оставить открытым. Взгляните на мой обновленный ответ.   -  person Trevor    schedule 15.10.2013


Ответы (1)


Обновить

$(function () {
  var selected;
  $('.vmenu li a').click(function(e){
    $('.vmenu ul').not($(this).parent().next('ul')).css('display','none');
  });
  $('a').each(function () {
    if ($(this).prop('href') == window.location.href) {
        $(this).addClass('_current_highlight_button');
        selected = $(this).parent().parent();
    }
  });
  $('.vmenu ul').not(selected).css('display','none');
});
person Trevor    schedule 15.10.2013
comment
Привет, Тревор, и спасибо за помощь. # 4 в основном говорит о том, что нужно расширять только выбранное меню / подменю, а все остальные должны быть закрыты. Надеюсь, это прояснится. Скрипка имеет 4 меню/подменю, поэтому в основном только 1 меню/подменю будет расширено при загрузке новой страницы после нажатия ссылки подменю. Наверное, лучше объяснить :) - person user2844139; 15.10.2013
comment
@user2844139 user2844139 Хорошо, посмотрите мое обновление. Дайте мне знать, если это работает для вас. - person Trevor; 15.10.2013
comment
Обратите внимание, что это должно работать с подменю. Теперь я не уверен, что вы ищете, чтобы все они были закрыты, кроме того, который щелкнул при нажатии на меню. Но я получу что-то, что касается и этого. - person Trevor; 15.10.2013
comment
Привет, Тревор, да, я хочу, чтобы все остальные подменю были закрыты. Было бы неплохо, если бы было расширено только выбранное подменю, а оставшиеся 3 подменю были закрыты. Кстати, спасибо за jQuery, который вы разместили выше :) - person user2844139; 15.10.2013
comment
Только что попробовал, не повезло, все подменю закрываются при нажатии на выбранную ссылку подменю. вы можете увидеть его вживую здесь ceramictilepro.com/Ceramic-Tile-And- Grout-Tips.php примечание: щелкните только верхнее вертикальное меню, чтобы выбрать подменю, так как я работаю над обновлением трех других меню/подменю. - person user2844139; 15.10.2013
comment
при нажатии на подменю выбранная ссылка не загружается, затем подменю закрывается, вы можете увидеть его вживую по приведенной выше ссылке. - person user2844139; 15.10.2013
comment
@user2844139 user2844139 обязательно удалите e.preventDefault из вашего jQuery, чтобы ссылка не загружалась. Я только поместил это в скрипку, чтобы она не пыталась перейти по несуществующей ссылке. Взгляните на мое последнее обновление. Чтобы открыть ссылку на новой странице, вам нужно будет сохранить информацию по вашей ссылке. - person Trevor; 15.10.2013
comment
хорошо, не знал, e.preventDefault(); был удален. не повезло. - person user2844139; 15.10.2013
comment
@user2844139 jsbin.com/UDiJiBu/6/edit посмотрите на этот код, он идет к ссылки для меня. Это должно по крайней мере загружать ссылки для вас, вам все равно придется работать над сохранением подменю, по которому вы щелкнули, через новую ссылку. - person Trevor; 15.10.2013
comment
хорошо, вы делаете большой прогресс! ссылки теперь работают!!! теперь просто нужно, чтобы выбранное подменю оставалось открытым, и все будет хорошо! вы можете увидеть это вживую. - person user2844139; 15.10.2013
comment
@user2844139 user2844139 хорошо, это заняло некоторое время, но я думаю, что у меня есть решение для вас. Проверьте мой ответ сейчас. Если этот ответ сработал для вас, отметьте свой вопрос как ответ. Спасибо - person Trevor; 15.10.2013