Блог

Главная - Вопросы по программированию - Выпадающий список не исчезает при фокусировке

Выпадающий список не исчезает при фокусировке

#javascript #html #css

Вопрос:

Я хотел создать раскрывающееся меню, которое отображало бы подменю по щелчку, используя псевдокласс CSS под названием focus-within, но оно не работает, если я снова щелкну раскрывающееся меню (Нажмите, чтобы выпадающее меню).

Я добавил код в фрагмент кода, чтобы вы могли запустить пример.

 .example-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    background: #ffffff;
    border: solid 2px #000000;

}

.example-dropdown {
    position: relative;
}

.example-dropdown > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    flex-direction: column;
    position: absolute;
    background: #ffffff;
    border: solid 2px #000000;
}

.example-dropdown:focus-within > ul {
    display: flex;
}

.example-menu a {
    display: inline-block;
    padding: 0.5rem;
}

.example-dropdown > a {
    display: inline-block;
    padding: 1rem;
    color: #000000;
}

.example-dropdown > a::after {
    content: " 2193"
} 
  <ul class="example-menu">
    <li class="example-dropdown">
        <a tabindex="0">Click to dropdown</a>
        <ul>
            <li><a href="http://example.com">Link</a></li>
            <li><a href="http://example.com">Link</a></li>
            <li class="example-dropdown">
                <a tabindex="0">Click to dropdown</a>
                <ul>
                    <li><a href="http://example.com">Link</a></li>
                    <li><a href="http://example.com">Link</a></li>
                    <li><a href="http://example.com">Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Выпадающий список не исчезает.

Есть ли какой-нибудь способ заставить это работать?

Комментарии:

1. Для этого вам нужно использовать javascript. Попробуйте посмотреть на toggle

2. Вы не можете сделать это, сосредоточившись только внутри. Вам лучше использовать js. Или если вы действительно хотите сделать это с помощью css. Вероятно, вам понадобится трюк с флажком, чтобы меню исчезло при втором щелчке.

3. Просто взгляните на любой фреймворк (например, Bootstrap) и посмотрите, как это делается.

4. Я могу использовать переключение с помощью jquery, но выпадающее меню основано на фокусе. Так что это не сработает.

Ответ №1:

Вам необходимо реализовать JavaScript для достижения функции переключения.

Это код для части JS, которая позволит достичь того, что вы ищете:

 // Parent Dropdown Menu
let menu1 = document.getElementById('parentMenu');
let list1 = document.getElementById('parentList');

// Child Dropdown Menu
let menu2 = document.getElementById('childMenu');
let list2 = document.getElementById('childList');

// Toggle Effect
menu1.onclick = function() {
    if (list1.style.display === 'block') {
        list1.style.display = 'none';
    }
    else {
        list1.style.display = 'block';
    }
}

menu2.onclick = function() {
    if (list2.style.display === 'block') {
        list2.style.display = 'none';
    }
    else {
        list2.style.display = 'block';
    }
}

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

Я добавил эффект в оба ваших выпадающих списка(Родительский и дочерний).

Родитель:

 ...
<a tabindex="0" id="parentMenu">Click to dropdown</a>
<ul id="parentList">
...

Ребенок:

 ...
<a tabindex="0" id="childMenu">Click to dropdown</a>
<ul id="childList">
...
 
 // Parent Dropdown Menu
let menu1 = document.getElementById('parentMenu');
let list1 = document.getElementById('parentList');

// Child Dropdown Menu
let menu2 = document.getElementById('childMenu');
let list2 = document.getElementById('childList');

// Toggle Effect
menu1.onclick = function() {
    if (list1.style.display === 'block') {
        list1.style.display = 'none';
    }
    else {
        list1.style.display = 'block';
    }
}

menu2.onclick = function() {
    if (list2.style.display === 'block') {
        list2.style.display = 'none';
    }
    else {
        list2.style.display = 'block';
    }
} 
 .example-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    background: #ffffff;
    border: solid 2px #000000;

}

.example-dropdown {
    position: relative;
}

.example-dropdown > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    flex-direction: column;
    position: absolute;
    background: #ffffff;
    border: solid 2px #000000;
}

.example-dropdown:focus-within > ul {
    display: flex;
}

.example-menu a {
    display: inline-block;
    padding: 0.5rem;
}

.example-dropdown > a {
    display: inline-block;
    padding: 1rem;
    color: #000000;
}

.example-dropdown > a::after {
    content: " 2193"
} 
  <ul class="example-menu">
    <li class="example-dropdown">
        <a tabindex="0" id="parentMenu">Click to dropdown</a>
        <ul id="parentList">
            <li><a href="http://example.com">Link</a></li>
            <li><a href="http://example.com">Link</a></li>
            <li class="example-dropdown">
                <a tabindex="0" id="childMenu">Click to dropdown</a>
                <ul id="childList">
                    <li><a href="http://example.com">Link</a></li>
                    <li><a href="http://example.com">Link</a></li>
                    <li><a href="http://example.com">Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

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

Комментарии:

1. Спасибо за ваш пост. Я думаю, я имею в виду, что когда вы нажимаете «Нажмите, чтобы выпадающий список», он должен исчезнуть. Не то, что внутри, меня это не интересует. Только возможность закрыть выпадающее меню, когда вы нажимаете на него, как вкл / выкл.

2. @stigmadev Оба выпадающих меню или только родительское? Код, который я предоставил, предназначен для второго «Нажмите, чтобы выпадающий список». Какой из них ты хочешь?

3. не второй «Нажмите, чтобы выпадающий список», а первый. Возможность закрыть выпадающее меню при нажатии на него

4. @stigmadev Понял. Я отредактирую ответ прямо сейчас.

5. @stigmadev Теперь все работает так, как ожидалось.

Ответ №2:

Если вы не хотите использовать JavaScript, вы можете попробовать что-то вроде ниже.

Сначала вы должны добавить элемент флажка в свой html.

 <ul class="example-menu">
    <li class="example-dropdown">
        <a tabindex="0">Click to dropdown</a>
        <input type="checkbox" class="click_effect" name="" id="index-0">
        <ul>
            <li><a href="http://example.com">Link</a></li>
            <li><a href="http://example.com">Link</a></li>
            <li class="example-dropdown">
                <a tabindex="0">Click to dropdown</a>
                <input type="checkbox" class="click_effect" name="" id="index-1">
                <ul>
                    <li><a href="http://example.com">Link</a></li>
                    <li><a href="http://example.com">Link</a></li>
                    <li><a href="http://example.com">Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Затем вы должны добавить некоторые новые свойства в файл css.

 #index-0:checked   ul, #index-1:checked   ul {
  display: flex;
}

Теперь вам нужно будет удалить приведенный ниже код.

 .example-dropdown:focus-within > ul {
    display: flex;
}
Метки: