HTML / CSS / PHP / JavaScript |Содержимое раскрывающегося списка не отображается рядом с выбранной кнопкой раскрывающегося списка. - PullRequest
Новая
       1

HTML / CSS / PHP / JavaScript |Содержимое раскрывающегося списка не отображается рядом с выбранной кнопкой раскрывающегося списка.

0 голосов
/ 26 февраля 2019

Немного предыстории и информации о моих знаниях кода:

Я изучаю код в течение 2-3 лет, и в настоящее время я работаю над веб-приложением с одноклассником, и мы почти закончили,В основном я занимался HTML / CSS, а он в основном PHP / JavaScript, поэтому мои знания в основном HTML и CSS.

Моя проблема:

Мой одноклассник закодировал систему, в которой определенные«значки» находятся на определенных уровнях, и вы можете перетаскивать их на разные уровни.Эти значки извлекаются из базы данных, а затем создаются с использованием некоторой формы цикла, который выполняется для каждого значка в базе данных.Это происходит с некоторым HTML-кодом в PHP.Эта часть работает отлично.

Изображение значков и уровней здесь

Теперь возникает моя проблема: я пытаюсь создать некоторую форму выпадающего меню в каждом отдельном человеке 'значок », но в то время как выпадающие кнопки появляются в каждом« значке », содержимое выпадающего меню отображается только рядом с первой кнопкой.Я не знаю, является ли это тем же контентом, который вызывается каждой кнопкой, или это другой контент, который по какой-то причине появляется в том же месте.Если бы кто-то мог сказать мне, что именно идет не так и как это исправить, это было бы очень признательно.(мы должны закончить наш проект 5 или 6 февраля 2019 года.)

Нажата первая выпадающая кнопка

Четвертая выпадающая кнопка нажата

Как вы можете видеть, он появляется в том же месте, но нажимаются разные кнопки.

Используемый код:

Основной код, состоящий из HTML, PHP и JavaScript: 

<!DOCTYPE html>

<head>
    <title>Badges</title>
    <link rel="stylesheet" href="main.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="BadgePage.js"></script>
</head>

<body style="margin:0">
    <div id="container">
      <div id="home">
        <a href="workinprogress.html">
          <button class="home-button">
            <img src="img/MCC.png" width="200" height="60">
          </button>
        </a>
      </div>
      <div id="BP-link" class="nav">
        <a href="Testing2.php"><button class="bpbutton">Badges</button></a>
      </div>
      <div id="lln_page" class="nav">
        <a href="LeerlingenPage.php"><button class="llnpbutton">Leerlingen</button></a>
      </div>
      <div id="main">
        <div class="main">

          <?php
            $link = mysqli_connect("localhost", "root", "", "badgedb");

            $lev = 1;
            $levAantal = 3;

            for($lev;$lev<=$levAantal;$lev++){
            echo '<div id="level' . $lev . '" class="levelID">';
            echo '<p class="level">Level ' . $lev . '</p>';
            echo '<ul class="itemList Level-' . $lev . ' ui-sortable" id="L' . $lev . '">';

            if($link === false){
                die("ERROR: Could not connect. " . mysqli_connect_error());
            }
            $sql = "SELECT * FROM badges";
            if($result = mysqli_query($link, $sql)){
              if(mysqli_num_rows($result) > 0){
          } else{
              echo "No records matching your query were found.";
          }
        } else{
          echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
        }


              while($row = mysqli_fetch_array($result)){
                        if($row['level'] == $lev){
                          echo "    <li class='item'>
                                      <link rel='stylesheet' href='side.css' />
                                      <script type='text/javascript'>
                                        /* When the user clicks on the button,
                                        toggle between hiding and showing the dropdown content */
                                        function myFunction() {
                                        document.getElementById('myDropdown').classList.toggle('show');
                                        }

                                        // Close the dropdown menu if the user clicks outside of it
                                        window.onclick = function(event) {
                                        if (!event.target.matches('.dropbtn')) {
                                          var dropdowns = document.getElementsByClassName('dropdown-content');
                                          var i;
                                          for (i = 0; i < dropdowns.length; i++) {
                                            var openDropdown = dropdowns[i];
                                            if (openDropdown.classList.contains('show')) {
                                              openDropdown.classList.remove('show');
                                            }
                                          }
                                        }
                                        }
                                      </script>
                                      <img src='img/" . $row['afbeelding'] . "' alt='Item Number " . $row['ID'] . "' class='itemImage' id='" . $row['ID'] . "'>
                                      <div class='dropdown'>
                                        <button onclick='myFunction()' class='dropbtn'>Dropdown</button>
                                        <div id='myDropdown' class='dropdown-content'>
                                          <button href='#'>Link 1</button>
                                          <button href='#'>Link 2</button>
                                        </div>
                                      </div>
                                    </li>";
                        }
                      }
                      echo "</ul>";
                      echo "</div>";
              }
              ?>
            <script type="text/javascript">
              function onSubmit(){
                var badgeID;
                var Alpha = 1;
                const search = $('.main > div.levelID > ul > li > img');
                const badges = {};
                const hrefDir = location.href.replace(/(^.*\/).*?$/, '$1'); // http://localhost/PWS/Testing2.php -> http://localhost/PWS/
                for (const badge of search) {
                  const levelID = parseInt(badge.parentElement.parentElement.id.replace('L', ''));
                  if (badge.id){
                    badgeID = parseInt(badge.id);
                  }
                  else {
                    badgeID = 0;
                  }
                  const badgeImg = badge.src.replace(hrefDir + 'img/', '');
                  badges[Alpha] = {
                    level: levelID,
                    afbeelding: badgeImg,
                    ID: badgeID
                  }
                  Alpha++;
                }

                $.ajax('api/update-order.php', {
                  data: badges
                });/*.done((data)=>{
                  console.log(data)
                });
                console.log(badges);/**/
                alert("Data uploaded!");
              }
            </script>
               <input type="button" onclick="onSubmit()" value="submitter">
          <!-- <div class="optionsButton">
            <div class="dropdown">
              <button class="dropbtn"><img src="img/cogwheel.png" alt="opties" class="options"></button>
              <div class="dropdown-content">
                <p>YEET</p>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
</body>

Основной документ CSS: 

* {
  box-sizing: border-box;
}

#myInput {
  background-color: white;
  width: 40%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
  margin-left: 30%;
}

#myTable {
  border-collapse: collapse;
  width: 80%;
  border: 1px solid #ddd;
  font-size: 18px;
  margin: 0 auto;

}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}

body {
    margin: 0;
}

}
.dropbtn {
  background-color: darkgray;
  border-left: solid;
  border-top: solid;
  border-top-left-radius: 10px;
  max-height: 10%;
  max-width: 5%;
  height: 100px;
  width: 100px;
  position: fixed;
  bottom: 0px;
  right: 0px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 100%;
  top: 0%;
  background-color: darkgray;
  width: auto;
}

.main {
  height: 100%;
}

.options {
  height: 100%;
  width: 100%;
}

p.level {
    width: inherit;
    text-align: center;
    background-color: gray;
    color: white;
    padding: 5px;
    margin-top: 0;
    font-size: 20px;
    border-radius: 10px;
    border: solid darkgray;
}

ul.itemList {
    height: auto;
    min-height: 50px;
}

.ui-sortable-handle {
  width: auto;
}

li.item {
    display: inline-block;
    border: 1px black double;
    background-color: lightgrey;
    padding: auto;
    padding-left: 1%;
    padding-right: 1%;
    margin-left: 0px;
}

img.itemImage {
    height: 150px;
    width: 150px;
}

button.bpbutton {
  height: 100%;
  width: 100%;
  color: white;
  background-color: #F44336;
  border: solid;
  border-color: #F44336;
}

button.bpbutton:hover {
  background-color: #cc1c0e;
  color: lightgray;
}

button.llnpbutton {
  height: 100%;
  width: 100%;
  color: white;
  background-color: #F44336;
  border: solid;
  border-color: #F44336;
}

button.llnpbutton:hover {
  background-color: #cc1c0e;
  color: lightgray;
}

button.home-button {
  height: 100%;
  width: 100%;
  color: white;
  background-color: #F44336;
  border: solid;
  border-color: #F44336;
}

#container {
    display: grid;
    grid-template-columns: 0fr 1fr 1fr;
    grid-template-rows: 1fr 14fr;
    grid-template-areas:"home BP-link lln_page"
                        "main"
}

#home {
    background-color: #F44336;
    padding-left: 10px;
    border-right: dashed #f22615;
    border-bottom: solid #f22615;
    color: white;
    padding-top: 1%;
}

#zoek {
    background-color: #F44336;
    border-right: dashed;
    border-color: #f22615;
    color: white;
    text-align: center;
    border-bottom: solid #f22615;
}

#BP-link {
  background-color: #F44336;
  color: white;
  text-align: center;
  border-bottom: solid #f22615;
  border-right: dashed #f22615;
}

#lln_page {
  background-color: #F44336;
  color: white;
  text-align: center;
  border-bottom: solid #f22615;
}

#main {
    background-color: lightgray;
    width: 100%;
    grid-column: 1 / end;
}

#workinprogress {
  background-image: url(https://www.scansys.eu/scansysfld/uploads/2017/06/Work_In_Progress.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: lightgray;
  width: 100%;
  grid-column: 1 / end;
}

th, td, table {
  border: 1px black solid;
  border-collapse: collapse;
}

textarea.comment {
  resize:none;
  height:50px;
  width:90%;
}

.buttonForSubmit {
  text-align: center;
}

#submitButton {
  height:50px;
  width:60px;
}

Документ CSS специально для выпадающих компонентов: 

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #304870;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content button {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
}

.dropdown-content button:hover {background-color: #ddd}

.show {display:block;}

Изображение базы данных, если вам это нужно.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...