Bootstrap Dropdown не работает до сих пор - PullRequest
Новая
       11

Bootstrap Dropdown не работает до сих пор

0 голосов
/ 30 апреля 2018

После долгих поисков у меня все еще не получается переключить выпадающий список и фактически выбрать элементы из выпадающего списка. На сайте Bootstrap написано, что он включает класс .show, но мне тоже не повезло с этим. Многие из примеров, которые я вижу здесь, похоже, не работают для меня. Помогите, пожалуйста!

Это мой код: 

body {
    margin: 0;
    padding: 0;
}

.jumbotron {
    text-align: center;
    width: 100%;
    height: auto;
}

h2 {
    font-size: 1.7em;
    margin-bottom: .8em;
}

.question {
    margin-top: 2em;
    padding-right: 6em;
    padding-left: 6em;
}

.buttonContainer {
    margin: 3em;
    text-align: center;
}

.button {
    background-color: red;
}
<!doctype html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="public/main.css">



</head>

<body>
    <div class="jumbotron">
        <h1 id="header">
            Post-Surgery Survey
        </h1>
    </div>
    <div class="container question">
        <h2>What kind of surgery did you have?</h2>
        <div class="dropdown surgeryType">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One
    <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Hip Replacement</a></li>
                <li><a class="dropdown-item" href="#">Knee Replacement</a></li>
            </ul>
        </div>
    </div>

    <div class="container question">
        <h2>How old are you?</h2>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One
    <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">Under 50</a></li>
                <li><a href="#">50-65</a></li>
                <li><a href="#">66-80</a></li>
                <li><a href="#">Over 80</a></li>
            </ul>
        </div>
    </div>

    <div class="container question">
        <h2>What kind of medication were you given?</h2>
        <div class="checkbox">
            <label><input type="checkbox" value="">Tylenol</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" value="">Celebrex</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" value="">Oxycodone</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" value="">Oxycotin</label>
        </div>

    </div>


    <div class="container question">
        <h2>Do you feel you were given enough medication?</h2>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One
    <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">Too much</a></li>
                <li><a href="#">Just right</a></li>
                <li><a href="#">Not enough</a></li>
            </ul>
        </div>
    </div>

    <div class="container question">
        <h2>How well was your pain controlled on a scale of 1-10?</h2>
        <p>1 being the most pain, 10 being the least.</p>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One
    <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">8</a></li>
                <li><a href="#">9</a></li>
                <li><a href="#">10</a></li>

            </ul>
        </div>
    </div>

    <div class="container question">
        <h2>Were you satisfied with your pain control?</h2>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Select One
    <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">Yes</a></li>
                <li><a href="#">No</a></li>
            </ul>
        </div>
    </div>

    <div class="container">
        <div class="buttonContainer">
            <button type="button" class="btn btn-primary btn-lg submit">Submit</button>
        </div>

    </div>
</body>

</html>

1 Ответ

0 голосов
/ 30 апреля 2018

Это зависит от того, что вы пытаетесь сделать. Прямо сейчас все ваши ссылки - просто якорные теги. Они никуда не ходят. <li><a href="#">Under 50</a></li>, например. Когда вы выбираете опцию в выпадающем меню, обратите внимание, как страница немного перепрыгивает? Это метка привязки, которая выбрасывает вас на верх той же страницы.

Если бы был реальный URL, вы бы пошли на эту страницу. Я подозреваю, что это не то, чего вы пытаетесь достичь. Это больше похоже на форму, в этом случае вы, вероятно, не хотите, чтобы .dropdown-toggle или data-toggle="dropdown" были назначены кнопкам. Вы хотели бы простой элемент выбора, нет? 

<select class="form-control" id="some-id">
  <option>Select an option</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...