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

 <ul class="nav nav-pills nav-justified">
    <li class="auto-style1"><a runat="server" href="~/" class="auto-style2"><strong><span class="auto-style3"Home Page</span></strong></a></li>
    <li class="auto-style1"><a runat="server" href="~/About" class="auto-style2"><strong><span class="auto-style3"Painting</span></strong></a></li>
    <li class="auto-style1"><a runat="server" href="~/Contact" class="auto-style2"><strong><span class="auto-style3"Drawing</span/strong></a></li>
    <li class="auto-style1"><a runat="server" href="~/" class="auto-style2"><strong><span class="auto-style3"Surfaces</span></strong></a></li>
    <li class="auto-style1"><a runat="server" href="~/About" class="auto-style2"><strong><span class="auto-style3"Easels</span></strong></a></li>
    <li class="auto-style1"><a runat="server" href="~/Contact" class="auto-style2"><strong<span class="auto-style3"Display</span></strong></a></li>
</ul>

И, наконец, это скриншот продукта после того, как я его запустил.

https://gyazo.com/6da0b7c3d170000167003bf0157e64f7

0
Zalgawi 17 Фев 2018 в 17:48
 – 
Tyler Sells
17 Фев 2018 в 17:52
Хотя эта ссылка была очень полезна для многих других вопросов, которые у меня были, она показывает, как сделать сворачиваемые раскрывающиеся меню, в то время как я хочу, чтобы мое меню раскрывалось только при наведении указателя мыши на него, а не при щелчке.
 – 
Zalgawi
17 Фев 2018 в 19:33
Я сейчас не сижу за компьютером, но думаю, что вам нужно будет добавить jQuery или JavaScript, чтобы добавить класс collapse.in в раскрывающийся список ul при наведении курсора для связанного li, который выполняет сворачивание
 – 
Tyler Sells
17 Фев 2018 в 19:55
Хотя они могут быть не правы. Мне нужно будет проверить это, когда я вернусь к компьютеру
 – 
Tyler Sells
17 Фев 2018 в 19:57
Я не слишком хорошо знаком с этими терминами, поскольку я еще новичок в программировании. Но не торопитесь, я буду доступен весь день.
 – 
Zalgawi
17 Фев 2018 в 20:14

1 ответ

Лучший ответ

Изменить: Чтобы подробнее рассказать о том, что должно происходить ниже, и поскольку мы говорим здесь о веб-формах, вам следует открыть страницу Site.Master.

На главной странице Site.Master: Если вы оставили код по умолчанию, который встраивает Visual Studio, вы должны увидеть следующие строки между тегами <Scripts></Scripts>:

        <asp:ScriptReference Name="MsAjaxBundle" />
        <asp:ScriptReference Name="jquery" /> 
        <asp:ScriptReference Name="bootstrap" />
        <asp:ScriptReference Name="respond" />
        <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
        <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
        <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
        <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
        <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
        <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
        <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
        <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
        <asp:ScriptReference Name="WebFormsBundle" />

Это говорит нам о том, что jQuery и Bootstrap импортируются на страницы. JQuery - это библиотека JavaScript, которая немного упрощает работу. Bootstrap - это библиотека CSS, которая позволяет очень легко улучшить внешний вид, добавив несколько классов к заданным элементам.

По умолчанию вы также увидите это там:

  <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" runat="server" href="~/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/">Home</a></li>
                    <li><a runat="server" href="~/About">About</a></li>
                    <li><a runat="server" href="~/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>

Это должно показаться знакомым, поскольку оно похоже на разметку в вашем исходном сообщении. Чтобы добавить раскрывающийся список, сравните приведенный ниже код, который включает раскрывающийся список, и вставьте необходимые части в приведенный выше код. Что-то вроде этого:

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" runat="server" href="~/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/">Home</a></li>
                    <li><a runat="server" href="~/About">About</a></li>
                    <li><a runat="server" href="~/Contact">Contact</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 4
                        <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                          <li><a runat="server" href="#">Page 1-1</a></li>
                          <li><a runat="server" href="#">Page 1-2</a></li>
                          <li><a runat="server" href="#">Page 1-3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

Это должно заставить вашу навигационную панель и раскрывающийся список работать, когда вы нажимаете какие-либо элементы.

Где разместить jQuery: Итак, лучшая практика для любых внешних скриптов, особенно больших, - загружать их последними, чтобы странице не приходилось ждать, пока они загрузят достаточно контента, чтобы сделать пользователя счастливым. ASP.NET MVC в этом отношении работает намного лучше, чем Webforms, но мы все же можем пытаться делать все правильно.

На странице Site.Master снова пройдите до самого низа. Вы ищете закрывающий тег ''. Прямо перед этим вам нужно будет поставить это:

<script>
    $(document).ready(function () {
        $(".dropdown").hover(function () {
            //toggle the open class (on/off)
            $(this).toggleClass("open");
        });
    })
</script>

Таким образом, конечный результат будет выглядеть так ...:

... ... ...
... ... ...
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - My ASP.NET Application</p>
            </footer>
        </div>

    </form>
    <script>
        //this line means we won't do anything until the page is ready for it
        $(document).ready(function () { 
            $(".dropdown").hover(function () {
                //toggle the open class (on/off)
                $(this).toggleClass("open");
            });
        })
    </script>
</body>
</html>

Перед редактированием:

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

Вот быстрый и простой способ сделать это с помощью начальной загрузки и jQuery:

jsfiddle: https://jsfiddle.net/tzv3t12c/9/

Шаблон Bootstrap Nav:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <!-- This is the li that we want to manually modify on hover.
           Basically, we're going to simulate the bootstrap event that happens
           when the link is clicked.  It doesn't do everything that bootstrap
           does when the link is clicked, but it works easily in a pinch
      -->
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>

      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 4
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Обязательный jQuery:

//find elements with the dropdown class and attach the hover event to it
$(".dropdown").hover(function(){
  //toggle the open class (on/off)
  $(this).toggleClass("open");
});

Объяснение:

По сути, все, что я здесь делаю, - имитирую действия щелчка, которые выполняет bootstrap при щелчке по раскрывающейся ссылке. Если вы используете инструменты разработчика в Chrome (или других браузерах), нажав F12, вы можете просматривать HTML-код во время взаимодействия со страницей. Вы заметите, что при нажатии на li с классом dropdown к нему добавляется открытый класс. Есть и другие элементы, которые также изменяются, и вы, возможно, захотите изучить возможность моделирования этих модификаций, поскольку изменение класса в dropdown li на dropdown open не приводит к этому, даже если он активирует переход.

0
Tyler Sells 23 Фев 2018 в 07:24
Итак, как мне изменить свой код, чтобы он стал таким?
 – 
Zalgawi
18 Фев 2018 в 04:46
Asp.net поставляется с панелью навигации по умолчанию в файле _Layout.cshtml, если вы используете mvc. Я не уверен, как это называется на стороне веб-форм. Asp.net имеет встроенную загрузку и jQuery. Вы должны иметь возможность изменить приведенный выше фрагмент навигации, включив в него нужные ссылки (просто замените элементы a на элементы a). Что касается того, где разместить jQuery, относитесь к нему как к JavaScript. Есть множество разных мест, где вы можете разместить его, но он будет находиться между тегами script и должен быть размещен после строки, импортирующей библиотеку jQuery.
 – 
Tyler Sells
18 Фев 2018 в 05:23
Привет, Тайлер, я не думаю, что использую jQuery, так как не могу найти что-то похожее на это. мои основные классы написаны на C #, веб-сайт сделан на html5, а также есть файлы CSS для сайта и начальной загрузки. Мне удалось сделать кнопку выпадающей, но я не могу понять часть зависания.
 – 
Zalgawi
19 Фев 2018 в 20:23
Вы используете MVC или веб-формы?
 – 
Tyler Sells
20 Фев 2018 в 05:42
Я использую веб-формы,
 – 
Zalgawi
20 Фев 2018 в 12:24