jquery - Bootstrap 导航栏菜单 Logo 不起作用-6ren

jquery - Bootstrap 导航栏菜单 Logo 不起作用

转载作者：搜寻专家更新时间：2023-10-31 08:17:04

请看一下这个 Bootply 或以下代码片段，我正在使用 Bootstrap 3.1，因为我想在我的网站上使用这个很棒的搜索框。但我遇到了一个问题，导航栏 Logo 不起作用(它甚至没有悬停，因此不可点击)。

enter image description here

注意:品牌 Logo 在移动版本中运行良好，仅在桌面版本中出现问题。因此，如果您在代码片段下方运行，请单击“全屏”以查看问题。

我不是 CSS 专家，所以你们能帮我解决这个问题吗？谢谢

$(function () {
        // Remove Search if user Resets Form or hits Escape!
		$('body, .navbar-collapse form[role="search"] button[type="reset"]').on('click keyup', function(event) {
			console.log(event.currentTarget);
			if (event.which == 27 && $('.navbar-collapse form[role="search"]').hasClass('active') ||
				$(event.currentTarget).attr('type') == 'reset') {
				closeSearch();
			}
		});

		function closeSearch() {
            var $form = $('.navbar-collapse form[role="search"].active')
    		$form.find('input').val('');
			$form.removeClass('active');
		}

		// Show Search if form is not active // event.preventDefault() is important, this prevents the form from submitting
		$(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) {
			event.preventDefault();
			var $form = $(this).closest('form'),
				$input = $form.find('input');
			$form.addClass('active');
			$input.focus();

		});
		// ONLY FOR DEMO // Please use $('form').submit(function(event)) to track from submission
		// if your form is ajax remember to call `closeSearch()` to close the search container
		$(document).on('click', '.navbar-collapse form[role="search"].active button[type="submit"]', function(event) {
			event.preventDefault();
			var $form = $(this).closest('form'),
				$input = $form.find('input');
			$('#showSearchTerm').text($input.val());
            closeSearch()
		});
    });

body {
		padding: 60px 0px;
	}

	.navbar-collapse {
		position: relative;
		padding-top: 30px !important;
		max-height: 270px;
	}
	.navbar-collapse form[role="search"] {
		position: absolute;
		top: 0px;
		right: 0px;
		width: 100%;
		padding: 0px;
		margin: 0px;
		z-index: 0;
	}
	.navbar-collapse form[role="search"] button,
	.navbar-collapse form[role="search"] input {
		padding: 8px 12px;
		border-radius: 0px;
		border-width: 0px;
		color: rgb(119, 119, 119);
		background-color: rgb(248, 248, 248);
		border-color: rgb(231, 231, 231);
		box-shadow: none;
		outline: none;
	}
	.navbar-collapse form[role="search"] input {
		padding: 16px 12px;
		font-size: 14pt;
		font-style: italic;
		color: rgb(160, 160, 160);
		box-shadow: none;
	}
	.navbar-collapse form[role="search"] button[type="reset"] {
		display: none;
	}

	@media (min-width: 768px) {
		.navbar-collapse {
			padding-top: 0px !important;
			padding-right: 38px !important;
		}
		.navbar-collapse form[role="search"] {
			width: 38px;
		}
		.navbar-collapse form[role="search"] button,
		.navbar-collapse form[role="search"] input {
			padding: 15px 12px;
		}
		.navbar-collapse form[role="search"] input {
			font-size: 18pt;
			opacity: 0;
			display: none;            
            height: 50px;
		}
		.navbar-collapse form[role="search"].active {
			width: 100%;
		}
		.navbar-collapse form[role="search"].active button,
		.navbar-collapse form[role="search"].active input {
			display: table-cell;
			opacity: 1;
		}
    	.navbar-collapse form[role="search"].active input {
			width: 100%;
		}
	}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>

                <span class="icon-bar"></span>	<span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="http://www.google.com">Brand Logo</a>

        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#" class="">Link</a>
                </li>
                <li><a href="#" class="">Link</a>
                </li>
                <li class="dropdown">	<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#" class="">Action</a>
                        </li>
                        <li><a href="#" class="">Another action</a>
                        </li>
                        <li><a href="#" class="">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#" class="">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#" class="">One more separated link</a>
                        </li>
            </ul>
            </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" class="">Link</a>
                </li>
                <li class="dropdown">	<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#" class="">Action</a>
                        </li>
                        <li><a href="#" class="">Another action</a>
                        </li>
                        <li><a href="#" class="">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#" class="">Separated link</a>
                        </li>
            </ul>
            </li>
            </ul>
            <form class="navbar-form" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search">	<span class="input-group-btn">
							<button type="reset" class="btn btn-default">
								<span class="glyphicon glyphicon-remove">
									<span class="sr-only">Close</span>
</span>
                    </button>
                    <button type="submit" class="btn btn-default">	<span class="glyphicon glyphicon-search">
									<span class="sr-only">Search</span>
</span>
                    </button>
                    </span>
                </div>
            </form>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<div class="container">
    <div class="row">
        <div class="alert alert-info" style="display: none;"> <strong class="">Alerts Dont Work on Bootsnipp!</strong> So when you hit
            enter or submit this form your result will show up in the green box below!</div>
        <div class="alert alert-success" style="display: none;"> <strong class="">Your Result!</strong>  <span id="showSearchTerm" class=""></span>

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

最佳答案

看来你已经付出了太多的努力。所以我有一个 CSS hack 可以解决你的问题。

使 Logo 优先于其他元素。

添加

.navbar-brand {
  position: relative;
  z-index: 1;
}

现在搜索在扩展时覆盖/优先于 Logo ，

改变

.navbar-collapse form[role="search"] {
  z-index: 2;
}

$(function() {
  // Remove Search if user Resets Form or hits Escape!
  $('body, .navbar-collapse form[role="search"] button[type="reset"]').on('click keyup', function(event) {
    console.log(event.currentTarget);
    if (event.which == 27 && $('.navbar-collapse form[role="search"]').hasClass('active') ||
      $(event.currentTarget).attr('type') == 'reset') {
      closeSearch();
    }
  });

  function closeSearch() {
    var $form = $('.navbar-collapse form[role="search"].active')
    $form.find('input').val('');
    $form.removeClass('active');
  }

  // Show Search if form is not active // event.preventDefault() is important, this prevents the form from submitting
  $(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) {
    event.preventDefault();
    var $form = $(this).closest('form'),
      $input = $form.find('input');
    $form.addClass('active');
    $input.focus();

  });
  // ONLY FOR DEMO // Please use $('form').submit(function(event)) to track from submission
  // if your form is ajax remember to call `closeSearch()` to close the search container
  $(document).on('click', '.navbar-collapse form[role="search"].active button[type="submit"]', function(event) {
    event.preventDefault();
    var $form = $(this).closest('form'),
      $input = $form.find('input');
    $('#showSearchTerm').text($input.val());
    closeSearch()
  });
});

body {
  padding: 60px 0px;
}
.navbar-collapse {
  position: relative;
  padding-top: 30px !important;
  max-height: 270px;
}
.navbar-collapse form[role="search"] {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  z-index: 2;
}
.navbar-collapse form[role="search"] button,
.navbar-collapse form[role="search"] input {
  padding: 8px 12px;
  border-radius: 0px;
  border-width: 0px;
  color: rgb(119, 119, 119);
  background-color: rgb(248, 248, 248);
  border-color: rgb(231, 231, 231);
  box-shadow: none;
  outline: none;
}
.navbar-collapse form[role="search"] input {
  padding: 16px 12px;
  font-size: 14pt;
  font-style: italic;
  color: rgb(160, 160, 160);
  box-shadow: none;
}
.navbar-collapse form[role="search"] button[type="reset"] {
  display: none;
}
.navbar-brand {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .navbar-collapse {
    padding-top: 0px !important;
    padding-right: 38px !important;
  }
  .navbar-collapse form[role="search"] {
    width: 38px;
  }
  .navbar-collapse form[role="search"] button,
  .navbar-collapse form[role="search"] input {
    padding: 15px 12px;
  }
  .navbar-collapse form[role="search"] input {
    font-size: 18pt;
    opacity: 0;
    display: none;
    height: 50px;
  }
  .navbar-collapse form[role="search"].active {
    width: 100%;
  }
  .navbar-collapse form[role="search"].active button,
  .navbar-collapse form[role="search"].active input {
    display: table-cell;
    opacity: 1;
  }
  .navbar-collapse form[role="search"].active input {
    width: 100%;
  }
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">	<span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>

        <span class="icon-bar"></span>		<span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="http://www.google.com">Brand Logo</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#" class="">Link</a>
        </li>
        <li><a href="#" class="">Link</a>
        </li>
        <li class="dropdown">	<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

          <ul class="dropdown-menu">
            <li><a href="#" class="">Action</a>
            </li>
            <li><a href="#" class="">Another action</a>
            </li>
            <li><a href="#" class="">Something else here</a>
            </li>
            <li class="divider"></li>
            <li><a href="#" class="">Separated link</a>
            </li>
            <li class="divider"></li>
            <li><a href="#" class="">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" class="">Link</a>
        </li>
        <li class="dropdown">	<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

          <ul class="dropdown-menu">
            <li><a href="#" class="">Action</a>
            </li>
            <li><a href="#" class="">Another action</a>
            </li>
            <li><a href="#" class="">Something else here</a>
            </li>
            <li class="divider"></li>
            <li><a href="#" class="">Separated link</a>
            </li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form" role="search">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search">	<span class="input-group-btn">
							<button type="reset" class="btn btn-default">
								<span class="glyphicon glyphicon-remove">
									<span class="sr-only">Close</span>
          </span>
          </button>
          <button type="submit" class="btn btn-default">	<span class="glyphicon glyphicon-search">
									<span class="sr-only">Search</span>
            </span>
          </button>
          </span>
        </div>
      </form>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="container">
  <div class="row">
    <div class="alert alert-info" style="display: none;"> <strong class="">Alerts Dont Work on Bootsnipp!</strong> So when you hit enter or submit this form your result will show up in the green box below!</div>
    <div class="alert alert-success" style="display: none;"> <strong class="">Your Result!</strong>  <span id="showSearchTerm" class=""></span>

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

关于jquery - Bootstrap 导航栏菜单 Logo 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31232549/

文章推荐： Python "or"在 Swift 中等效？

文章推荐： java - 如何设置JTable中特定单元格的值？

文章推荐： swift - 用于显示剩余预算百分比的计算

文章推荐： html - 为什么父高度与内部图像高度不同？

twitter-bootstrap - Bootstrap、Twitter Bootstrap 和 Bootstrap 3 之间有什么区别？
有人可以告诉我 Bootstrap、Twitter Bootstrap 和 Bootstrap 3 之间有什么区别吗？最佳答案在 CSS 框架的上下文中，Bootstrap 和 Twitter B
twitter-bootstrap - Bootstrap 文档中的屏幕阅读器是什么？？？ >>>[ Bootstrap 文件]
什么是 Bootstrap 文档中的屏幕阅读器？？？ >>> bootstrap document 不知道什么是屏幕阅读器？最佳答案它是视力不佳或由于某种原因无法从屏幕上阅读的人使用的工具；它会向
twitter-bootstrap - Bootstrap : How do I identify the Bootstrap version?
我想更新网站上的 Bootstrap，但我不知道安装的版本。如何仅使用 bootstrap.css 和 bootstrap.min.js 文件来识别 bootstrap 版本？ CSS 文件中没有版
twitter-bootstrap - Bootstrap.js、Bootstrap.min.js、Bootstrap-table.js 有什么区别
很抱歉问了这么一个愚蠢的问题，但我真的不清楚这些。 Bootstrap 是一个非常棒的库，它节省了开发人员的大量工作。因为它提供了很多功能，比如节省大量时间。响应式功能。一致的设计。便于使用
twitter-bootstrap - 如何使用 ng2-bootstrap 从 Bootstrap 3 切换到 Bootstrap 4？
我正在使用 ng2-bootstrap对于 Angular 2 项目。这个包同时支持Bootstrap 3和4，我安装后默认使用Bootstrap 3。我没有找到任何关于切换的信息。如何从 Boo
twitter-bootstrap - 我在 "ngx-bootstrap"和 "@ng-bootstrap/ng-bootstrap"之间感到困惑
我计划在我的项目中使用 Bootstrap 4 和 angular 4，但我对 npm install --save @ng-bootstrap/ng-bootstrap 和 npm install
twitter-bootstrap - 如何使用 Bootstrap 类将 Bootstrap 警报高度显示为较小的字体？
单击删除按钮后，我设置了警报。但它的默认高度更大，我想让它更小(高度)。我试过 display-4 属性(property)，但它没有工作。我已通过 w-50 将宽度设置为屏幕的一半，但警报的一
twitter-bootstrap - 在 Bootstrap 按钮下拉列表中显示 Bootstrap 选择
我使用 Bootstrap 按钮下拉菜单来显示表单。我通过调用 stopPropagation 禁用了单击时消失的下拉菜单(当用户操作表单时) .表单的元素之一是下拉列表。如果我使用 native h
twitter-bootstrap - twitter-bootstrap 中 "bootstrap"这个词的含义
twitter-bootstrap 中的“bootstrap”一词是什么意思？在许多 gem 中都有“bootstrap”这个词。我搜索了其中的含义，但无法得出结论。那么有人可以在这种情况下给出“Bo
twitter-bootstrap - Bootstrap 5 仍然推荐使用 Bootstrap-vue？
由于 Bootstrap 5 不再使用 jQuery 并且正在使用 vanilla JS，我想知道是否仍然建议使用 Bootstrap-Vue，不管 Bootstrap-Vue 还不支持 Bootst
twitter-bootstrap - Bootstrap typeahead 在 Bootstrap 模式中不起作用
我正在使用 codeigniter 框架，我正在使用 bootstrap typeahead，一切都很好，但我的问题是当我将它放在 bootstrap 模式中时，bootstrap typeahead
twitter-bootstrap - Bootstrap 5 引用错误 : bootstrap is not defined
我刚刚完成安装 bootstrap 5 版本 ^5.0.0-alpha1并在 app.js 中导入 Bootstrap import "bootstrap" 其他.js var myModal = n
twitter-bootstrap - Bootstrap ScrollSpy 似乎正在破坏 Bootstrap 选项卡
我一直在尝试在使用选项卡的页面上实现 ScrollSpy。这是我的 body 标签: 这是我的标签 HTML: Home Profile
twitter-bootstrap - Twitter Bootstrap 和 Bootstrap-Xtra
如果您选择使用 Bootstrap-Xtra，您是否应该也包括原始的 bootstrap.css，或者 bootstrap-xtra.css 应该是一个完整的替代品。例如，bootstrap-xtr
twitter-bootstrap - 如何使用 Bootstrap 日期选择器作为输入创建 Bootstrap 框提示符
我正在使用 bootbox 创建一个对话框。 bootbox.dialog({ message: 'Datepicker input: ', title: "Custom label"
twitter-bootstrap - react Bootstrap 中的 Bootstrap "type alignment"
我正在将使用 Bootstrap 构建的 Web 应用程序迁移到 React 和 react-bootstrap，两者都很棒。我在 react-bootstrap 中没有看到的一件事是如何顺利集成 B
twitter-bootstrap - 为什么 bootstrap 3 中的 bootstrap 默认按钮对我来说是深灰色的？
我正在使用 Bootstrap 3 RC，默认按钮是带有黑色文本的深灰色，而不是带有黑色文本的浅灰色。我已经尝试过 CDN 链接和离线。我还清空了我的浏览器缓存以防万一。有没有其他人经历过这个？这可能
twitter-bootstrap-3 - bootstrap-tagsinput with typeahead, bootstrap-3
在我的一个项目中，我曾经有 bootstrap-tagsinput http://timschlechter.github.io/bootstrap-tagsinput沿着 bootstrap-2.3
twitter-bootstrap - AngularUI/Bootstrap 是否支持 twitter-bootstrap 3？
下拉菜单在 Angular-UI-Bootstrap 中不起作用？使用 Bootstrap-3 CSS 以下是代码。链接Click me for a dropdown出现。但不会在点击时切换。怎么了？
twitter-bootstrap - 如何在 Bootstrap Table 中添加 Bootstrap 按钮
如何在 Bootstrap Table 中添加 Bootstrap 按钮最佳答案我已经想出了解决办法。我想和大家分享。这是我的 table : # Visit

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - Bootstrap 导航栏菜单 Logo 不起作用