Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.86/36: Рейтинг темы: голосов - 36, средняя оценка - 4.86
 Аватар для megaguru
16 / 16 / 1
Регистрация: 12.11.2012
Сообщений: 193

По щелчку по ссылке достать ближайший элемент с классом menu и сделать его видимым

07.01.2013, 19:23. Показов 7529. Ответов 7
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
навеяло отсюда Достать любой следующий элемент
у меня вопрос из той же оперы...

В общем имеем такую разметку:

HTML5 Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="title_text">
                            <a href="#" class="menulink"><b>чай</b></a>
                        </div>
                     </div>    
                        <div class="menu">
                            <div class="menu_text">
                                <div class="menu_item">
                                    <div class="menu_item_text">Черный</div>
                                </div>
                                <div class="menu_item">
                                    <div class="menu_item_text">
                                        Зеленый
                                    </div>
                                </div>
                                <div class="menu_item">
                                    <div class="menu_item_text">
                                        Улун
                                    </div>
                                </div>
Задача: нужно щёлкнуть по ссылке с классом menulink и по щелчку достать ближайший элемент с классом menu и сделать его видимым.

В CSS так:
CSS Скопировано
1
2
3
4
.menu
{
    display: none;
}
Почитав доку по jQuery и с полной уверенностью, что сейчас у меня всё получится, делаю так:

JavaScript Скопировано
1
2
3
4
$('.menulink').bind('click', function()
{
     $(this).next('.menu').css('display', 'block');
});
конечно этот вызов внутри
JavaScript Скопировано
1
$(document).ready()
ан не проканывает!
Офигев малость, делаю так:
JavaScript Скопировано
1
2
3
4
$('.menulink').bind('click', function()
{
     alert($(this).next('.menu').css('display'));
});
В ответ - undefined!

Что я не так делаю?

Добавлено через 5 минут
Сейчас сделал так:
JavaScript Скопировано
1
2
3
4
$('.menulink').bind('click', function()
    {
        $("div").next('.menu').css('display', 'block');
    });
у меня открылись ВСЕ элементы с классом .menu. А нужен только один..ближайший
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
07.01.2013, 19:23
Ответы с готовыми решениями:

В массиве каждый элемент заменить на ближайший следующий за ним элемент, который больше его
Помогите выполнить лабу на с++ Само задание: В таблице А размера N за один просмотр необходимо каждый элемент заменить на ближайший...

Как сделать элемент видимым?
Здравствуйте! Хочу скрыть ссылку на AdminPAge для пользователей и открыть ее для адиминов. Делаю так. При загрузке страницы...

Найти элемент последовательности (его порядковый номер и значение), ближайший к n
я не прошу код(но не откажусь). Хотя бы с чего мне начать подскажите задача: Дана последовательность вещественных чисел а1,а2, ..а15,...

7
55 / 55 / 8
Регистрация: 29.08.2012
Сообщений: 175
07.01.2013, 20:12
Дело в том, что ссылка Ваша находится в блоке и у него нет "ближайших братьев по дереву". Необходимо перейти на уровень выше и искать там родственников. В Вашем случае это будет выглядеть так:
JavaScript Скопировано
1
2
3
4
$('.menulink').bind('click', function()
{
     $(this).parent().next('.menu').css('display', 'block');
});
0
 Аватар для Soldado
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
07.01.2013, 20:15
Это сделать не трудно, если разобраться с вёрсткой. У Вас в строке 2 открывается див , а в строке 4 и 5 два закрытия.
Дайте код в котором бы было парное количество открывающих и закрывающих тегов. Чтобы было ясно, что это не ошибка, а ссылка, например является потомком дива class="title_text" первого или второго уровня и подниматься нужно на 1 или 2 уровня вверх. Так как Вы сделали - это абсолютно не верно.
JavaScript Скопировано
1
2
3
$(".menulink").click(function(){
$(this).parent().parent().next().css('display','block'); //вот здесь от уровня и зависит количество parent
})
0
 Аватар для megaguru
16 / 16 / 1
Регистрация: 12.11.2012
Сообщений: 193
07.01.2013, 21:12  [ТС]
Хе...

Додумался вот до такого (спасибо всем помогавшим!)

JavaScript Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 $('.menulink').bind('click', function()
    {
        //alert($("div").next('.menu').css('display'));
        var cssValue = $(this).parent().parent().next('.menu').css('display');
        var object = $(this).parent().parent().next('.menu');
        
        /* 
         * элемент, на котором кликнули, открыт. Требуется его закрытие. По умолчанию предполагаем, что все другие подобные элементы уже закрыты
         */
        if (cssValue == 'block')
        {
            object.removeClass('opened');
            object.removeClass('current');
        }
 
        /*
         *  Элемент закрыт. Требуется его открытие. Параллельно закрываем все до этого открытые элементы
         */
        else
        {
            //object.css('display', 'block');
                object.addClass('opened');
                object.addClass('current');
        
        //alert(object.attr('class'));
            $('.menu').each(function(index)
            {
               var classValue = $(this).attr('class');
               if (classValue != 'current')
               {
                   $(this).removeClass('opened');
               }
            });
        }
    });
Но теперь ничего не открывается и ошибок не выдаётся
0
 Аватар для Soldado
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
07.01.2013, 21:39
Цитата Сообщение от megaguru Посмотреть сообщение
Но теперь ничего не открывается и ошибок не выдаётся
Так нужна помощь или нет?
Коммент в строке 9:
По умолчанию предполагаем, что все другие подобные элементы уже закрыты
C чего вы решили?

Дайте исправленный (правильный) html - код. Скажите толком чего хотите.
Например:нужно кликнуть по ссылке и чтобы открылся следующий блок .menu, а все остальные, при этом, закрылись (или не закрылись - оставались открытыми).
Так не понятно:
JavaScript Скопировано
1
2
3
4
5
6
7
*  Элемент закрыт. Требуется его открытие. Параллельно закрываем все до этого открытые элементы
         */
        else
        {
            //object.css('display', 'block');
                object.addClass('opened');
                object.addClass('current');
C чего вдруг все открытые элементы закрываются из-за того, что показанному элементу присваиваются 2 класса.

Не будет чётких формулировок с правильным кодом - я пас.
0
 Аватар для megaguru
16 / 16 / 1
Регистрация: 12.11.2012
Сообщений: 193
07.01.2013, 21:44  [ТС]
Короче, есть меню:

Пункт 1
Пункт 1.1.
Пункт 1.2.
Пункт 2
Пункт 2.1.
Пункт 2.2.
Пункт 2.3.
Пункт 3
Пункт 3.1.
Пункт 3.2.
Пункт 4
Пункт 4.1.
Пункт 4.2.

Я кликнул на Пункт 1. Предположим что оно закрыто. Значит, надо его открыть. И по ходу дела проверить, если есть ещё открытые меню, кроме текущего, их надо закрыть.
Если же оно открыто, то надо его закрыть.
Исходя из моих рассуждений, [b]в каждый конкретный момент времени может быть открыто одно и только одно меню.
0
 Аватар для Soldado
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
07.01.2013, 22:10
Я ПРАВИЛЬНЫЙ код просил, а не пространные объяснения.
Цитата Сообщение от megaguru Посмотреть сообщение
Я кликнул на Пункт 1. Предположим что оно закрыто.
Что оно?
Кликнули по закрытому пункту - это как?
Элементарный вопрос превратили в пустую переписку, а ещё megaguru
Только по причине Рождества
JavaScript Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(document).ready(function(){
 $(".menulink").click(function(){
     var objMenu = $(this).parent().next();//получаем объект который открывать или закрывать
       if ( objMenu.css('display') == 'none' ) {//если блок не виден
       $('.menu').css('display','none');// все закрываем
             objMenu.css('display','block');//нужный открываем
             
              } else {
             objMenu.css('display','none');//нужный закрываем
             }
             return false; // блокируем переход по ссылке, чтобы небыло # в адресной строке
      })                 
 });/*end  ready*/
 </script>
Демо-страница
0
 Аватар для megaguru
16 / 16 / 1
Регистрация: 12.11.2012
Сообщений: 193
07.01.2013, 22:20  [ТС]
Soldado,
Ну, во-первых огромное спасибо за помощь! Просто громадное, это очень важно для меня! Но хочется немножко прокомментировать последнее сообщение... ну просто чтобы было понимание что я тоже не на пустом месте пишу

Цитата Сообщение от Soldado
Кликнули по закрытому пункту - это как?
По закрытому заголовку. Заголовки просто есть, а меню от них может быть как открыто так и закрыто.

Цитата Сообщение от Soldado
Элементарный вопрос превратили в пустую переписку, а ещё megaguru
Ну извините! Для некоторых элементарный вопрос, а большинство может даже и не знает, что такое jQuery. Все мы находимся в процессе постоянного обучения. Я вот музыкант, но если я вам про сонатную форму начну рассказывать, это ж для вас китайская грамота, правильно? Для вас, но не для меня, поскольку я это знаю. А между тем, это тоже элементарный вопрос - но именно для меня, а не для вас.

Цитата Сообщение от Soldado
Только по причине Рождества
Вот за это вам спасибо огромное!
С Рождеством!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
07.01.2013, 22:20
Помогаю со студенческими работами здесь

Найти элемент массива (его порядковый номер и значение), ближайший к а
Всем привет, если не затруднит, помогите решить задачу. 1. Дан массив, упорядоченный по возрастанию, и число а, о котором известно...

Как сделать видимым дочерний элемент при клике?
Привет! вывожу массив фалов https://jsfiddle.net/demeys/eywraw8t/462223/ &lt;ul class=&quot;list-inline&quot;&gt; &lt;li...

После setVisibility(View.GONE) не могу сделать элемент видимым
Нужно скрывать/показывать нижнюю панель (LinearLayout). Если скрыть ее (View.GONE), то элемент (fragment), заполняет весь экран. Но...

Ошибки при попытке закрыть excel или сделать его видимым
bool st = false; try { Excel = CreateOleObject(&quot;Excel.Application&quot;);//ïûòàåìñÿ ïîäêëþ÷èòüñÿ ê ýêñåëþ st =...

Как установить MSSQLEXPRESS на windows 2012, и сделать его видимым всем ?
В общем снес я всю свою старую систему... Раньше, учился я на локальном сервере , но теперь.. Так как имеется в распоряжении хороший...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
Агрегаты и сущности в DDD микросервисах
Javaican 10.04.2025
Разработка современных программных систем часто приводит на распутье: монолит или микросервисы? Даже при выборе микросервисной архитектуры многие команды сталкиваются с проблемой правильного. . .
Многопоточность в C#: Task и параллельное программирование
UnmanagedCoder 10.04.2025
Современные процессоры уже давно перестали наращивать тактовую частоту в пользу увеличения количества ядер. Это создало интересную ситуацию: разработчики, привыкшие к последовательному. . .
Линейное решение нелинейной задачи будет применено как метод обработки данных из double buffering. Формулы от LM конечно с ошибками.
Hrethgir 10.04.2025
В продолжение Эта LM дала ответ похожий на нормальный. В комментриях мой комментарий - похоже она ошиблась с выведением итоговой формулы, но остальные проверю. Assistant qwen2. 5-14b-instruct . . . .
Переменные в Python
py-thonny 10.04.2025
Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .
Многопоточность в C#: Task и асинхронные операции
UnmanagedCoder 10.04.2025
Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .
Линейное решение не линейной задачи (емкость вычислений в сравнении с традиционными решениями пока не определена).
Hrethgir 10.04.2025
В рамках предстоящих вычислений пришлось (да, я тоже знаю про корень числа, и про степеня, и прочие теоремы, но. . . ) найти способ нахождения отношения двух углов. . . .
Запуск контейнеров Docker на ARM64
Mr. Docker 09.04.2025
Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .
Vue SFC компонент на PHP с Fusion
Jason-Webb 09.04.2025
PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .
TypeScript vs JavaScript: Отличия и когда что использовать
Reangularity 09.04.2025
JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .
Подключение Kafka к Elasticsearch
Codd 09.04.2025
Apache Kafka и Elasticsearch — две мощные технологии, которые при совместном использовании создают эффективную платформу для обработки и анализа данных в реальном времени. Kafka, выступая в роли. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru
Выделить код Копировать код Сохранить код Нормальный размер Увеличенный размер