Question

我创建了一个带子菜单的垂直菜单。每个菜单最少有3个子菜单，每个子菜单仅在单击菜单时打开。（对于此菜单，我需要jQuery支持）但是，我没有在任何其他页面中使用jQuery所以我跳过链接jQuery。没有jQuery这就是它的外观：没有jQuery my output

**如果编码员可以在没有jQuery欢迎的情况下完成这项工作，或者我如何才能使用CSS

此处jsfiddle适用于jQuery 有人可以在没有jQuery

的情况下完成这项工作

功能

  $(function () {
      $('li ul').hide();
      $("#leftmenuidfrmslt li").click(function (e) {
          var submenu = $(this).children("ul");
          if (!$(submenu).is(":visible")) {
              $('li ul').slideUp("fast");
              submenu.slideDown("fast");
          } else {
              submenu.slideUp("fast");
          }
      });
  });

Answer 1

使用属性选择器，您可以将默认font-size设置为20px并覆盖特定元素：

[class*="flaticon-"] {
    font-size: 20px;    
}

h4[class*="flaticon-"] {
    font-size: 40px;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 2

我会提出一个没有jquery的解决方案。您应该向css添加一些类，并将它们应用于html代码中的相应UL标记。这是jsfiddle sample处理纯javascript（没有jquery）这里的javascript源代码是：

function getXmlHttp(){
    try {
        return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch (ee) {
        }
    }
    if (typeof XMLHttpRequest!='undefined') {
        return new XMLHttpRequest();
    }
}
function hide(node){
    node.style.display='none';
}
function func(e){
    e.preventDefault();
    var q = getXmlHttp();
    var url = this.getAttribute('href');
    q.open('GET', url , false);
    q.send(null);
    var result = 'File '+url+' not found.';
    if(q.status == 200) {
        result = q.responseText;
    }
    document.querySelector('.page').innerHTML = result;
    document.querySelector('#leftmenu').style.width = '70px';
    var items = document.querySelectorAll('li ul, #leftmenu b');
    for (var i=0; i<items.length; i++) {
        hide(items[i]);
    }
    this.removeEventListener('click',func(),false);
}

function slideUp(node){
    node.setAttribute('class', "submenu hidden");
}

function slideDown(node){
    node.setAttribute('class', "submenu visible");
}

function switchSubMenu(){
var ch = this.children;
    for(var i=0; i<ch.length; i++) {
        if (ch[i].nodeName == 'UL') {
            var v = document.getElementsByClassName("visible");
            if (v) {
                for(var j=0; j<v.length; j++){
                    if(v[j] != ch[i]) {
                        slideUp(v[j]);
                    }
                }
            }
          ch[i].getAttribute('class') == "submenu hidden" ? slideDown(ch[i]) : slideUp(ch[i]);
        }
    }
}

var sm = document.querySelectorAll('.submenu');
for(var i=0; i<sm.length; i++) {
    slideUp(sm[i]);
    sm[i].parentNode.addEventListener("click",switchSubMenu, false);
}
var links = document.querySelectorAll('.reveal');
for(var j=0; j<links.length; j++) {
    links[j].addEventListener("click",func, false);
}

Answer 3

您应该添加像这样的字体大小

.small-icon { 
    font-family:"Flaticon";
    font-size: 20px;
    line-height: 1;
}
.small-icon:before {
    font-size: 20px;        
    margin-left: 0;
}
.big-icon { 
    font-family:"Flaticon";
    font-size: 40px;
    line-height: 1;
}
.big-icon:before {
    font-size: 40px;        
    margin-left: 0;
}

对于html

<div class="center boxborder">
    <ul class="social">
        <li><a href="#"><span class="small-icon flaticon-facebook12" style="color: #3399ff;"></span></a>

        </li>
        <li> <a href="#"><span class="small-icon flaticon-social19" style="color:#33ccff;"></span></a>

        </li>
        <li> <a href="#"><span class="small-icon flaticon-google109" style="color: #ff3300;"></span></a>

        </li>
        <li><a href="#"><span class="small-icon flaticon-linkedin11" style="color: #21a6d8;"></span></a>

        </li>

    </ul>
</div>

Answer 4

实际上，虽然你可以在CSS中从技术上做到这一点，但使用jQuery或vanilla JS代表了更好的解决方案，可以提供更强大的设置。

它还可确保您在内容（HTML），样式（CSS）和功能（JS）之间保持正确和正确的关注点分离）。

那说......你可以使用下面的（或类似的）

来接近CSS

Demo Fiddle

HTML

<div class='menuGroup'>
    <label id='item1'>
        <input type='radio' for='item1' name='menu1' />Item 1
        <div class='menuGroup'>
            <label id='subitem1'>
                <input type='radio' for='subitem1' name='submenu1' />Item 1
                <div class='menuGroup'>more menu levels...</div>
            </label>
            <label id='subitem2'>
                <input type='radio' for='subitem2' name='submenu1' />Item 2
                <div class='menuGroup'>more menu levels...</div>
            </label>
        </div>
    </label>
    <label id='item2'>
        <input type='radio' for='item2' name='menu1' />Item 2
        <div class='menuGroup'>
            <label id='subitem3'>
                <input type='radio' for='subitem4' name='submenu2' />Item 1
                <div class='menuGroup'>more menu levels...</div>
            </label>
            <label id='subitem4'>
                <input type='radio' for='subitem5' name='submenu2' />Item 2
                <div class='menuGroup'>more menu levels...</div>
            </label>
        </div>
    </label>
</div>

CSS

label {
    display:block;
    position:relative;
}
label:not(:last-child) {
    border-bottom:1px solid grey;
}
input {
    display:none;
}
input:checked+.menuGroup {
    display:block;
    width:200px;
    left:100%;
    top:-1px;
}
label .menuGroup {
    display:none;
}
.menuGroup {
    position:absolute;
    border:1px solid grey;
}

使这些点击功能无需jQuery即可运行

功能

4 个答案:

Demo Fiddle