CSS가있는 메뉴에 대한 호버를 비활성화합니다

Question

나는이 일주일 동안 이것을 해결하려고 노력해 왔습니다. 나는 그것이 단순하다고 확신하지만 나는 그것으로 정말로 고투하고 있습니다!

사용자가 표시 할 수 있도록 사용자를 클릭해야 해소 내 탐색을 변경하려고합니다. 나는 Magento의 기본값이 적어도 그게 최소한 내 일이 일어나는 일이기 때문입니다. 누군가 가이 이것이 내가 옳을지도 모르는 CSS 수업에 영향을받는 것으로 믿는 것을 말했습니다. 바탕 화면에서 내 모바일 버전 (바탕 화면에서 볼 때)을 사용하면 클릭이 가능하지만 바탕 화면에 호버가 표시됩니다.

여기에 NAV-PRIMARY 용 CSS가 있습니다.

.nav-primary a {
color:#9a9a9a;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
}

.nav-primary a:hover {
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
}

#header-account li a,
.nav-primary a.level0 {
width: 200px;
text-align: left;
color: #636363;
text-transform: uppercase;
line-height: 20px;
padding-top: 0;
padding-right: 15px;
padding-bottom: 0;
margin-left: 300px;
}

#header-account li:last-child a,
.nav-primary li.level0:last-child a.level0 {
border-bottom: 0;
}

.no-touch #header-account a:hover,
.no-touch .nav-primary a:hover {
text-decoration: none;
}

.nav-primary {
display: block;
padding-top: 30px;
}

.nav-primary a {
text-decoration: none;
position: relative;
display: block;
color: #636363;
line-height: 30px;
font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
}

.nav-primary li {
position: relative;
}

.nav-primary li.level1 a {
margin-left: 350px;
}

.nav-primary .menu-active > ul.level0,
.nav-primary li.level0 li.sub-menu-active > ul {
 display: block;
 }

.nav-primary li.level0 > a {
text-transform: uppercase;
}

/* ============================================ *
* Small Viewports - Accordion Style Menu
* ============================================ */
.nav-primary a.level0,
.nav-primary a {
 line-height: 25px;
 }
 .nav-primary li.level0 ul {
 display: none;
 }
.nav-primary li.level0 li {
 padding: 0 0 0 25px;
 }
 .nav-primary li.level1 a {
 padding: 0 15px 0 25px;
 }
.nav-primary li.parent > a:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 display: block;
 border-top: 5px solid transparent;
 border-bottom: 5px solid transparent;
 border-left: 5px solid #cccccc;
 border-right: none;
 top: 50%;
 left: 10px;
 right: auto;
 margin-top: -5px;
 }
 .nav-primary li.parent.sub-menu-active > a:after,
 .nav-primary li.parent.menu-active > a:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 display: block;
 border-right: 5px solid transparent;
 border-left: 5px solid transparent;
 border-top: 5px solid #cccccc;
 border-bottom: none;
 top: 50%;
 left: 10px;
 right: auto;
 margin-top: -5px;
 }
.nav-primary li.menu-active > a,
.nav-primary li.sub-menu-active > a {
 color: #000;
 }
/* ============================================ *
 * Large Viewports - Dropdown Menu
 * ============================================ */

 .nav-primary li.menu-active > ul {
 display: block;
 }

.

이것은 호버에 표시되거나 거기에있는 것으로 나타나는 것입니다.

.nav-primary li.level0 ul { display: none; } 

.

하지만 호버에서 클릭하도록 변경해야할지 모르겠습니다.

업데이트 :

i / appl.js에서 코드를 다음과 같이 변경했으며 작동하는 것 같습니다!

mouseClickAction: function(event, target) {
    if(this.useSmallScreenBehavior()) {
        return; // don't do mouse enter functionality on smaller screens
    }

    $j(target).addClass('menu-active'); //show current menu
},

/**
 * On large screens, hide menu.
 * On small screens, do nothing.
 *
 * @param event
 * @param target
 */
mouseClickAction: function(event, target) {
    if(this.useSmallScreenBehavior()) {
        return; // don't do mouse leave functionality on smaller screens
    }

    $j(target).removeClass('menu-active'); //hide all menus
},

/**
 * On large screens, don't interfere so that browser will follow link.
 * On small screens, toggle menu visibility.
 *
 * @param event
 * @param target
 */
mouseClickAction: function(event, target) {
    {
        event.preventDefault(); //don't follow link
        this.toggleMenuVisibility(target); //instead, toggle visibility
    }
},

.

기본적으로 이제는 작은 화면 버전과 동일하게 작동합니다. 사용자가 멋진 다음 카테고리를 표시하려면 클릭하십시오! 나는 이제는 작동하지 않는 페이지로 전환하는 대신 정적 블록을 표시하는 것을 의미하는 몇 가지 범주를 가지고 있습니다. 정적 블록을 표시 할 수있는 방법은 무엇입니까?

Answer 1

지정한 선택기가 디스플레이 추가 중입니다. 드롭 다운을 숨기는 것입니다.그것은 동일하게 유지 될 수 있습니다. 변경해야 할 것은 그들을 보여주는 부분입니다.이 선택기가 수행하는 것처럼 보입니다 ".nav-primary .menu-active> ul.level0"메뉴 항목을 표시합니다 : 다시 차단하십시오.정말로 변경해야 할 것은 메뉴의 "MENU-ACTIVE"클래스를 SKIR / FRONEND / RWD / DEFAULT / JS / APP.JS가 될 RWD 테마로 "메뉴 - 활성"클래스를 추가하는 JavaScript입니다.

Answer 2

일반적으로 jQuery와 CSS가 아닌 inclick 이벤트를 찾고 있습니다.CheckBox를 사용하는 CSS 해결 방법이 있습니다.이 질문에 대한 답변 ...에

Asker이 질문에 당신이 찾고있는 것을 가질 수 있습니다.