- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 AngularJS 和 mmenu 制作菜单,但我有一些子菜单无法正确用作子菜单。本质上,mmenu 将跨度视为菜单,当您单击它时,它会展开(或尝试)并将标签视为链接,当您单击它时,菜单会关闭并尝试将您发送到链接。问题是,当我使用 ng-repeat 构建菜单时,我的一些项目是链接(a),有些项目应该有进一步的子菜单,使它们具有跨度。我可以想出几种方法来解决这个问题,但我似乎无法使它们发挥作用,以下是我尝试过的解决方案:
使用 ng-click 函数运行 if 语句来查看单击的菜单是否有嵌套 ul,如果有,则添加类 mm.opened 来展开子菜单,而不是点击链接
使用函数在构建后运行整个菜单并找到任何 <a>
具有嵌套 ul 的标签,并将 a 标签替换为 span ("span"+ this.innerHTML + "/span")
寻求帮助(当前步骤)
我确实对任何解决方案持开放态度,我的 Angular 可能是错误的,这可能导致我所有的问题,所以请随时纠正我。
我无法附加工作示例,因为我的菜单是从 json 文件构建的,并且我无法将 json 导入到代码编辑器(据我所知)
这是我的菜单:
<ul>
<li><a ng-href="#/home" class="menuBtn">Home</a></li>
<li ng-repeat="menu in menuInfo" ng-class="countDisable(menu.schematics.length, menu)"> <a class="menuBtn">ATA {{menu.ata}} - {{menu.name}}</a>
<ul>
<li ng-click="subCheck()" ng-repeat="submenu in menu.schematics"><a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name}}</a>
<ul>
<li ng-repeat="animated in submenu.subs"><a ng-href="#{{animated.view}}" ng-click="contentCtrl(animated)" class="menuBtn">{{animated.name}}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
它看起来像这样:
当我单击 ATA 29 时,它会扩展为:
你会看到 ATA 29 有 4 个项目,其中 3 个应该是常规链接,第一个也有四个嵌套项目,所以当我单击它时,我希望它像 ATA 29 一样展开,但是相反,它认为它是一个链接,所以它这样做:
我意识到如果没有工作代码就很难提供帮助,但任何帮助将不胜感激。
var app = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
//determines redirects go via shortcuts, clicking on the management icon on the main page sends the routeProvider /MG which it then uses to pull the relevant HTML file
$routeProvider
.when('/', {
controller: 'projectController',
templateUrl: './assets/html/home.html'
})
.when('/schematicView', {
controller: 'projectController',
templateUrl: './assets/html/schematicView.html'
})
.when('/staticView', {
controller: 'projectController',
templateUrl: './assets/html/staticView.html'
})
.otherwise({
controller: 'projectController',
templateUrl: './assets/html/home.html'
})
}
]);
app.controller('projectController', function projectController($scope, $http, $rootScope, $timeout) {
// $(document).ready(function($) {
// setTimeout(function() {
// $("#menu").mmenu({
// "slidingSubmenus": false,
// "counters": true,
// extensions: ["multiline"],
// offCanvas: {
// position: "left",
// zposition: "front"
// }
// });
// }, 100);
// // $("#menu").click(function() {
// // $('.mm-opened').removeClass('mm-opened');
// // });
// });
$scope.menuInfo = [{
name: "This is a span it should expand"
}];
$scope.secMenuInfo = [{
name: "This is an a, it should close the menu",
name2: "This is an a, but it needs to work like a span",
name3: "This is an a, it should close the menu"
}];
// $scope.activeID = 'HM';
// $scope.activePath = "Assets/images/allActive.png";
// function getImgPath(item) {
// $scope.activePath = "Assets/images/" + item.path + "";
// console.log($scope.activePath);
// }
// $("#menu em").trigger("count");
$scope.setImgPath = function(btnPath) {
console.log(btnPath)
$scope.activePath = "Assets/images/" + btnPath + "";
console.log($scope.activePath);
};
$scope.contentCtrl = function(id) {
$scope.active = id;
console.log($scope.active);
// $scope.activeItem = item;
// getImgPath($scope.activeItem);
};
// $scope.subCheck = function() {
// if ($(this).children().find('mm-counter')) {
// alert("has ul");
// return false;
// } else {
// alert("no ul");
// return false;
// }
// };
});
app.directive("mmenu", function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$timeout(function() {
$(element).mmenu({
"slidingSubmenus": false,
"counters": true,
extensions: ["multiline"],
offCanvas: {
position: "left",
zposition: "front"
} //ends offCanvas
});
$("em").each(function() {
var t = $(this).text().trim();
if (t == "0") {
$(this).next().remove();
$(this).remove();
}
});
}, 10);
} //ends link
}
});
/* Helvetica Font */
@font-face {
font-family: HelveticaNeue;
src: local('0'), url('../fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), url('../fonts/HelveticaNeueLTStd-Lt.otf') format('otf');
}
body,
html {
font-family: Helvetica, Arial, sans-serif;
overflow: none;
color: #FFF;
}
body {
background: #FFFFFF;
}
#header {
background: #212121;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
#footer {
background: #212121;
box-shadow: 0 -1.5px 4px rgba(0, 0, 0, 0.24), 0 -1.5px 6px rgba(0, 0, 0, 0.12);
}
.fa {
color: #8ea5d0;
}
.fa:hover {
color: #627EB0;
}
.fa:active {
color: #415E95;
}
a:focus {
outline: 0 none;
color: #627EB0;
text-decoration: none;
}
.info_btn {
color: #FFF !important;
background-color: #8ea5d0;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
}
.info_btn:hover {
background-color: #627EB0;
}
.info_btn:active {
background-color: #415E95;
color: #FFF;
text-decoration: none;
}
.info_btn:hover,
.info_btn:visited,
.info_btn:link,
.info_btn:active {
text-decoration: none;
color: #FFF;
}
#menu {
background: #444444;
box-shadow: 5px 0px 4px rgba(0, 0, 0, 0.3);
z-index: 10;
}
#menu .li {
background: #555555;
}
#menu > ul > li {
list-style: none;
}
#menu > ul {
padding: 0px;
}
.menuBtn {
background-color: transparent;
display: inline-flex;
cursor: pointer;
color: #ffffff;
border: #212121;
border-bottom-style: solid;
border-width: 1px;
width: 100%;
font-size: 17px;
padding: 10px 10px;
-webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
-moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
-o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
outline: none;
}
.menuBtn:hover {
background-color: #333333;
outline: none;
}
.menuBtn:active {
position: relative;
background-color: #222222;
outline: none;
}
#homeContent {
color: #000000;
}
/* Global and Overrides */
#header {
height: 96px;
border: 0;
top: 0px;
width: 100%;
}
#content {
width: 100%;
position: fixed;
top: 96px;
bottom: 72px;
}
#footer {
height: 72px;
border: 0;
bottom: 0px;
position: fixed;
width: 100%;
}
.fa {
font-size: 36px;
cursor: pointer;
display: inline-block;
padding-top: 30px;
padding-left: 30px;
}
.title {
position: absolute;
right: 75px;
top: 20px;
max-width: 400px;
}
.info_btn {
position: absolute;
font-size: 40px;
font-weight: 400;
right: 30px;
top: 48px;
border-radius: 50px;
padding: 0 21.8px;
font-size: 20px;
line-height: 48px;
position: absolute;
top: 72px;
right: 1.6%;
z-index: 100;
}
/* causes the color to change when you hover over a button of class myButton */
.revNum {
font-size: 16px;
position: absolute;
bottom: 25px;
left: 12px;
}
.footer_info {
bottom: 25px;
position: absolute;
margin: 0px auto;
width: 100%;
font-size: 18px;
display: block;
text-align: center;
}
.logo {
height: 48px;
position: absolute;
bottom: 12px;
right: 75px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/css/jquery.mmenu.all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/js/jquery.mmenu.all.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.2/angular-route.js"></script>
</head>
<body ng-app="myApp" ng-controller="projectController">
<title>{{projectInfo.title}}</title>
<div id="wrapper">
<div id="header">
<a class="fa fa-home" ng-href="#/home"></a>
<img class="title" src="assets/images/title.svg"></img>
<a href class="info_btn"><span>i</span></a>
<nav id="menu" mmenu>
<ul>
<li><a ng-href="#/home" class="menuBtn">Home</a>
</li>
<li ng-repeat="menu in menuInfo" ng-class="countDisable(menu.schematics.length, menu)"> <span class="menuBtn">ATA {{menu.ata}} - {{menu.name}}</span>
<ul>
<li ng-repeat="submenu in secMenuInfo"><a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name}}</a>
<li ng-repeat="submenu in secMenuInfo"><a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name2}}</a>
<ul>
<li ng-repeat="animated in secMenuInfo"><a ng-href="#{{animated.view}}" ng-click="contentCtrl(animated)" class="menuBtn">{{submenu.name3}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="content">
<a href="#menu" target="_self"><h1>HOME</h1></a>
</div>
<div id="footer">
<div class="revNum">Revision: {{projectInfo.version}}</div>
<div class="footer_info">{{projectInfo.footer}}</div>
<img class="logo" ng-src="./assets/images/{{projectInfo.logo}}">
</div>
</div>
</body>
</html>
最佳答案
同级 li
未关闭,并且已成为嵌套菜单,而没有正确设置为子菜单。
li
没有生成我期望的 span
。所以我只是复制了我在顶部菜单中看到的模式,它就起作用了。
更改此:
<li ng-repeat="submenu in secMenuInfo">
<a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name}}</a>
<li ng-repeat="submenu in secMenuInfo">
<a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name2}}</a>
对此:
<li ng-repeat="submenu in secMenuInfo">
<a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name}}</a>
</li>
<li ng-repeat="submenu in secMenuInfo">
<span class="menuBtn">{{submenu.name2}}</span>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/css/jquery.mmenu.all.css" rel="stylesheet" />
<style>
/* Helvetica Font */
@font-face {
font-family: HelveticaNeue;
src: local('0'), url('../fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), url('../fonts/HelveticaNeueLTStd-Lt.otf') format('otf');
}
body,
html {
font-family: Helvetica, Arial, sans-serif;
overflow: none;
color: #FFF;
}
body {
background: #FFFFFF;
}
#header {
background: #212121;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
#footer {
background: #212121;
box-shadow: 0 -1.5px 4px rgba(0, 0, 0, 0.24), 0 -1.5px 6px rgba(0, 0, 0, 0.12);
}
.fa {
color: #8ea5d0;
}
.fa:hover {
color: #627EB0;
}
.fa:active {
color: #415E95;
}
a:focus {
outline: 0 none;
color: #627EB0;
text-decoration: none;
}
.info_btn {
color: #FFF !important;
background-color: #8ea5d0;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
}
.info_btn:hover {
background-color: #627EB0;
}
.info_btn:active {
background-color: #415E95;
color: #FFF;
text-decoration: none;
}
.info_btn:hover,
.info_btn:visited,
.info_btn:link,
.info_btn:active {
text-decoration: none;
color: #FFF;
}
#menu {
background: #444444;
box-shadow: 5px 0px 4px rgba(0, 0, 0, 0.3);
z-index: 10;
}
#menu .li {
background: #555555;
}
#menu > ul > li {
list-style: none;
}
#menu > ul {
padding: 0px;
}
.menuBtn {
background-color: transparent;
display: inline-flex;
cursor: pointer;
color: #ffffff;
border: #212121;
border-bottom-style: solid;
border-width: 1px;
width: 100%;
font-size: 17px;
padding: 10px 10px;
-webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
-moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
-o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
outline: none;
}
.menuBtn:hover {
background-color: #333333;
outline: none;
}
.menuBtn:active {
position: relative;
background-color: #222222;
outline: none;
}
#homeContent {
color: #000000;
}
/* Global and Overrides */
#header {
height: 96px;
border: 0;
top: 0px;
width: 100%;
}
#content {
width: 100%;
position: fixed;
top: 96px;
bottom: 72px;
}
#footer {
height: 72px;
border: 0;
bottom: 0px;
position: fixed;
width: 100%;
}
.fa {
font-size: 36px;
cursor: pointer;
display: inline-block;
padding-top: 30px;
padding-left: 30px;
}
.title {
position: absolute;
right: 75px;
top: 20px;
max-width: 400px;
}
.info_btn {
position: absolute;
font-size: 40px;
font-weight: 400;
right: 30px;
top: 48px;
border-radius: 50px;
padding: 0 21.8px;
font-size: 20px;
line-height: 48px;
position: absolute;
top: 72px;
right: 1.6%;
z-index: 100;
}
/* causes the color to change when you hover over a button of class myButton */
.revNum {
font-size: 16px;
position: absolute;
bottom: 25px;
left: 12px;
}
.footer_info {
bottom: 25px;
position: absolute;
margin: 0px auto;
width: 100%;
font-size: 18px;
display: block;
text-align: center;
}
.logo {
height: 48px;
position: absolute;
bottom: 12px;
right: 75px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="projectController">
<title>{{projectInfo.title}}</title>
<div id="wrapper">
<div id="header">
<a class="fa fa-home" ng-href="#/home"></a>
<img class="title" src="assets/images/title.svg"></img>
<a href class="info_btn"><span>i</span></a>
<nav id="menu" mmenu>
<ul>
<li><a ng-href="#/home" class="menuBtn">Home</a>
</li>
<li ng-repeat="menu in menuInfo" ng-class="countDisable(menu.schematics.length, menu)"> <span class="menuBtn">ATA {{menu.ata}} - {{menu.name}}</span>
<ul>
<li ng-repeat="submenu in secMenuInfo"><a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name}}</a>
</li>
<li ng-repeat="submenu in secMenuInfo"><span class="menuBtn">{{submenu.name2}}</span>
<ul>
<li ng-repeat="animated in secMenuInfo"><a ng-href="#{{animated.view}}" ng-click="contentCtrl(animated)" class="menuBtn">{{submenu.name3}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="content">
<a href="#menu" target="_self"><h1>HOME</h1></a>
</div>
<div id="footer">
<div class="revNum">Revision: {{projectInfo.version}}</div>
<div class="footer_info">{{projectInfo.footer}}</div>
<img class="logo" ng-src="./assets/images/{{projectInfo.logo}}">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/js/jquery.mmenu.all.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.2/angular-route.js"></script>
<script>
var app = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
//determines redirects go via shortcuts, clicking on the management icon on the main page sends the routeProvider /MG which it then uses to pull the relevant HTML file
$routeProvider
.when('/', {
controller: 'projectController',
templateUrl: './assets/html/home.html'
})
.when('/schematicView', {
controller: 'projectController',
templateUrl: './assets/html/schematicView.html'
})
.when('/staticView', {
controller: 'projectController',
templateUrl: './assets/html/staticView.html'
})
.otherwise({
controller: 'projectController',
templateUrl: './assets/html/home.html'
})
}
]);
app.controller('projectController', function projectController($scope, $http, $rootScope, $timeout) {
// $(document).ready(function($) {
// setTimeout(function() {
// $("#menu").mmenu({
// "slidingSubmenus": false,
// "counters": true,
// extensions: ["multiline"],
// offCanvas: {
// position: "left",
// zposition: "front"
// }
// });
// }, 100);
// // $("#menu").click(function() {
// // $('.mm-opened').removeClass('mm-opened');
// // });
// });
$scope.menuInfo = [{
name: "This is a span it should expand"
}];
$scope.secMenuInfo = [{
name: "This is an a, it should close the menu",
name2: "This is an a, but it needs to work like a span",
name3: "This is an a, it should close the menu"
}];
// $scope.activeID = 'HM';
// $scope.activePath = "Assets/images/allActive.png";
// function getImgPath(item) {
// $scope.activePath = "Assets/images/" + item.path + "";
// console.log($scope.activePath);
// }
// $("#menu em").trigger("count");
$scope.setImgPath = function(btnPath) {
console.log(btnPath)
$scope.activePath = "Assets/images/" + btnPath + "";
console.log($scope.activePath);
};
$scope.contentCtrl = function(id) {
$scope.active = id;
console.log($scope.active);
// $scope.activeItem = item;
// getImgPath($scope.activeItem);
};
// $scope.subCheck = function() {
// if ($(this).children().find('mm-counter')) {
// alert("has ul");
// return false;
// } else {
// alert("no ul");
// return false;
// }
// };
});
app.directive("mmenu", function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$timeout(function() {
$(element).mmenu({
"slidingSubmenus": false,
"counters": true,
extensions: ["multiline"],
offCanvas: {
position: "left",
zposition: "front"
} //ends offCanvas
});
$("em").each(function() {
var t = $(this).text().trim();
if (t == "0") {
$(this).next().remove();
$(this).remove();
}
});
}, 10);
} //ends link
}
});
</script>
</body>
</html>
关于javascript - 用 span 替换标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35158753/
我有一个模式来匹配类似的东西 ... 1036 ... 但是我不想匹配 1036 因为会抓 1036 但无论如何我不想捕获双倍跨度,因为我不需要这些数据。我需要跨度和行尾之间的数据。 我在跨度的末尾尝
如何使用正则表达式来匹配该字符串: regularexpression . 如何交换第一个跨度的内容和第二个跨度的内容。 我认为可以使用jquery源码。 最佳答案 请务必阅读 RegEx match
我正在测试一个指令,该指令会在 200 个字符后 chop 文本。它改变了这一点: 对此: long text long text long text long text long
我有代码将这个字符串解析成一个字符数组: var textArray = Regex.Replace(text, @"]*|/)?>", String.Empty).Trim().ToCharA
我正在尝试使用 BeautifulSoup 提取包含在 id="titleDescription"范围内的字符串。 Customer Choice Award Winner
Hello
拆分为 Hello如何分割Hello至 Hello使用javascript var text = "Hello"; 记住:我不知道什么包含 , 我不知道 有没有属性 我找到了答案! var patt=/^(.*)$/i
我有一个数组列表 ArrayList al = new ArrayList(); al.add("tree good has"); al.add("ok go by"); al.add
我有一个使用 span 的 html 文件关键字以两种不同的方式。 第一个在第二个定义中 button.groovyButton span这里: button.groovyButton { b
仍在尝试让新站点的导航控件按照我想要的方式工作。 我将我的问题简化为这段代码: Test span { display: inline-block; heigh
This is 城市。它因 而闻名。
”我是编码新手 在下面的 pgm 中,任何人都可以帮我找出为什么 ng-bind 不起作用吗? 提前致谢。 Angular js Welocme!Please enter valu
我必须在下面的 html 代码中提取文本内容以进行 python 网络抓取,问题是类参数,所有三个变量都具有相同的类参数,所以我尝试使用 arial-label,但它不起作用。 2, 3 Proper
如何填充一组 带有一个带有循环的单词数组? 如果数组包含[ "one", "two", "three" ]并被称为“wordarray” 然后我想填充跨度,使其看起来像 one two
如果我们有 div 并且没有跨度,即一个跨度中的跨度,并且每个跨度都有一种颜色样式,如何使用 css 或 jquery 覆盖特定样式[颜色]..。请帮助我 最佳答案 你的意思是这样的吗? red bl
我以为下面的选择器只会匹配example b。有人可以向我解释一下 CSS 路径的工作原理吗? body div span a{ background:#000; color:#fff
我正在尝试获取内可用的文本元素。我已经使用innerHTML来检索内部文本,但很少元素内部文本放置在 内元素。 在检索文本值时,将其获取为 sample text作为输出字符串。谁能帮我删除 在输出
我应该加上“n” (显示“n”flaticon-icons)到一个div(我的页面是.php) 这是 div 这是 div_icon CSS 类 @media (max-width: 600px
无法获取“表格”中的跨度文本,谢谢! from bs4 import BeautifulSoup import urllib2 url1 = "url" content1 = urllib2.urlo
这个问题在这里已经有了答案: My inline-block elements are not lining up properly (5 个答案) 关闭 8 年前。 HTML $ 400 这会在同
我正在尽力在图像中插入 span 标签标题。 两者都在段落和 span 标签内。 如何让 lorem ipsum 文本作为标题出现在图像的底部?? Lorem ipsum dolor
我有以下 HTML 文件。 "| Testing" 我要打印 "| Testing" , 而不是打印这个打印 "| Testing" .所有这
我是一名优秀的程序员,十分优秀!