Блог

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

Раскрывающееся меню начальной загрузки 4 при использовании вкладок

#html #jquery #bootstrap-4

Вопрос:

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

Если я сначала открою выпадающее меню, а затем нажму на кнопку, его можно открыть, иначе оно ничего не покажет… это потому, что я не добавляю стиль с помощью javascript ?

 <!DOCTYPE HTML>
<html>
<head>
        <title>Title Here</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
    </head>
    </style>
    <body>      

            <button id="yikes" href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
            <ul id="editMenuSelector" class="dropdown-menu">
                <li><a href="#">Copy</a></li>
                <li><a href="#">Paste</a></li>
                <li><a href="#">Undo</a></li>                   
            </ul>
            <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
            <ul id="debugMenuSelector" class="dropdown-menu">
                <li><a href="#">Some Debug</a></li>
                <li><a href="#">Show XML</a></li>
                <li><a href="#">Show Log</a></li>
                <li><a href="#">Shut down the lot</a></li>
            </ul>
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a href="#profile" class="nav-link" data-toggle="tab">Profile</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade show active" id="home">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Debug</a>
                </div>
                <div class="tab-pane fade" id="profile">
                    <button onclick="myFunction()" href="#" >Debug</button>
                    <p>Profile tab content ...</p>
                </div>
                <div class="tab-pane fade" id="messages">
                    <p>Messages tab content ...</p>
                    
                </div>
            </div>
            <script>
               function myFunction (){
                   $("#editMenuSelector").addClass('open');
                   $("#editMenuSelector").addClass('show');
                   $("#yikes").attr("aria-expanded","true");
                   console.log("yikes");
               }
            </script>
    </body>
</html>
Метки: