Блог

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

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

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

Мой код

 <div class="card card-container">
        <div class="card-body">
            <img class="mr-4" src="images/icon.png" width="30px" height="30px" >
            <a href="#" data-toggle="modal" data-target="#viewContact" style="color: inherit; "class="stretched-link">Contact_name</a>
            <span class="d-inline float-right">
                <div class="dropdown">
                    <a href="#" id="imageDropdown" data-toggle="dropdown">
                        <img src="images/ellipsis.png" width="30px" height="30px">
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
                        <li data-toggle="modal" data-target="#editContact" role="presentation"><a class="ml-3" role="menuitem" tabindex="-1" href="#">Edit</a></li>
                        <li data-toggle="modal" data-target="#deleteContact" role="presentation"><a class="ml-3" style="color: red;" role="menuitem" tabindex="-1" href="#">Delete</a></li>
                    </ul>
                </div>
            </span> 
        </div>
    </div>
 

Полностью кликабельная карта:

Отображается модальный:

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

Я просматриваю ваш код, проблема в том, что если карта полностью кликабельна, вам нужно установить свойство стиля, которое указывает, что определенный элемент находится поверх кликабельной карты, в этом случае z-index свойство выполнит свою работу.

Попробуйте выполнить следующий код:

Я добавил z-index:99 в выпадающий <span> элемент.

 <div class="card card-container">
    <div class="card-body">
        <img class="mr-4" src="images/icon.png" width="30px" height="30px" />
        <a href="#" data-toggle="modal" data-target="#viewContact" style="color: inherit; "class="stretched-link">Contact_name</a>
        
        <!-- Dropdown element -->
        <span class="d-inline float-right" style="z-index:99">
            <div class="dropdown">
                <a href="#" id="imageDropdown" data-toggle="dropdown">
                    <img src="images/ellipsis.png" width="30px" height="30px">
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
                    <li data-toggle="modal" data-target="#editContact" role="presentation"><a class="ml-3" role="menuitem" tabindex="-1" href="#">Edit</a></li>
                    <li data-toggle="modal" data-target="#deleteContact" role="presentation"><a class="ml-3" style="color: red;" role="menuitem" tabindex="-1" href="#">Delete</a></li>
                </ul>
            </div>
        </span> 
        <!-- End of dropdown element -->

    </div>
</div>
 

Определение и использование: свойство z-индекса определяет порядок стека элемента. Элемент с большим порядком стека всегда находится перед элементом с меньшим порядком стека.