Блог

Главная - Вопросы по программированию - Меню с тремя точками PHP HTML

Меню с тремя точками PHP HTML

#php #html #css

Вопрос:

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

Я включил это в свой цикл сообщений, поэтому не понимаю, почему это не работает.

 $str .= "<div class='status_post'>
            <div class='post_profile_pic'>
                <img src='$profile_pic' width='50'>
            </div>

            <!-- three dot menu -->
            <div class='dropdownPosts'>
                <!-- three dots -->
                <ul class='dropdownbtn icons btn-right showLeft' onclick='showDropdown()'>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <!-- menu -->
                <div id='myDropdown' class='dropdownPost-content'>
                    <a href='#home'>Home</a>
                    <a href='#about'>About</a>
                    <a href='#contact'>Contact</a>
                </div>
            </div>

            <div class='posted_by' style='color:#ACACAC;'>
                <a href='$added_by'> $username </a> $user_to amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;$time_message
                $delete_button
            </div>
            <div id='post_body'>
                $body
                <br>
                $imageDiv
                <br>
                <br>
            </div>

            <div class='newsfeedPostOptions' onClick='javascript:toggle$id(event)'>
                Comments($comments_check_num)amp;nbsp;amp;nbsp;amp;nbsp;
                <iframe src='like.php?post_id=$id' scrolling='no'></iframe>
            </div>

        </div>
        <div class='post_comment' id='toggleComment$id' style='display:none;'>
            <iframe src='comment_frame.php?post_id=$id' id='comment_iframe' frameborder='0'></iframe>
        </div>
        <hr>";
 
 .header{
    width: 100%;
    background-color: #0d77b6 !important;
    height: 60px;
}

.showLeft{
    color:#000 !important;
    padding:10px;
}

.icons li {
    background: none repeat scroll 0 0 #000;
    height: 7px;
    width: 7px;
    line-height: 0;
    list-style: none outside none;
    margin-right: 15px;
    margin-top: 3px;
    vertical-align: top;
    border-radius:50%;
    pointer-events: none;
}

.btn-left {
    left: 0.4em;
}

.btn-right {
    right: 0.4em;
}

.btn-left, .btn-right {
    position: absolute;
    top: 0.24em;
}

.dropdownbtn {
    position: absolute;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin-top: 6%;
    margin-right: 30%;
}

 .dropdownPosts {
    position: absolute;
    display: inline-block;
    right: 0.4em;
}

.dropdownPost-content {
    display: none;
    position: absolute;
    margin-top: 60px;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdownPost-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdownPosts a:hover {background-color: #f1f1f1}

.show {display:block;}
 
 <script>
    function changeLanguage(language) {
        var element = document.getElementById("url");
        element.value = language;
        element.innerHTML = language;
    }

    function showDropdown() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
        if (!event.target.matches('.dropdownbtn')) {
            var dropdowns = document.getElementsByClassName("dropdownPost-content");
            var i;
            for (i = 0; i < dropdowns.length; i  ) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }
</script>

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

1. Скорее всего, это та showDropdown функция, которую вам нужно показать

2. Приведенный выше фрагмент PHP/html является повторяющимся содержимым в цикле? Если да id='myDropdown' ( и любые другие повторяющиеся идентификаторы ) неверны ~ все идентификаторы должны быть уникальными

3. Идентификаторы должны быть уникальными в HTML-документе. С .post_comment помощью div внизу вы включили счетчик циклов в идентификатор в качестве суффикса, чтобы сделать их уникальными, но для id='myDropdown' и id='post_body' вы также пренебрегли этим должным образом в этих местах.

4. Я только что обновил свой код с помощью JS.

5. @CBroe, я действительно не понимаю этого

Ответ №1:

Если вы удалите любые дублированные идентификаторы из HTML и измените часть с 3 точками следующим образом

 <div class='dropdownPosts'>
    <!-- three dots -->
    <ul class='dropdownbtn icons btn-right showLeft' onclick='showDropdown(event)'>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- menu -->
    <div class='dropdownPost-content'>
        <a href='#home'>Home</a>
        <a href='#about'>About</a>
        <a href='#contact'>Contact</a>
    </div>
</div>

Затем вы можете изменить свою showDropdown функцию следующим образом:

 function showDropdown(event) {
    event.target.nextElementSibling.classList.toggle("show");
}
Метки: