Question

我的代码---

[HTML CODE]

 <div class="hidden_menu_opener" title="More...."></div>
 <div class="hidden_menu_container" style="display:none;">
     <div class="hidden_menu_arrow"></div>
     <div class="hidden_menu"></div>
 </div>

[JAVASCRIPT CODE]

$(document).ready(function () {
    var $hidden_menu_opener = $(".hidden_menu_opener");
    var $hidden_menu = $(".hidden_menu_container");
    $hidden_menu_opener.click(function () {
        $hidden_menu.toggle();
    });
});
$(document).mouseup(function (e){
    var hidden_menu = $(".hidden_menu_container");
    if (!hidden_menu.is(e.target)&& hidden_menu.has(e.target).length === 0){
        hidden_menu.hide(1);
    }
});

解释----

我有一个带有“hidden_menu_opener”类的触发器，当点击它时会显示隐藏的div，其类为“hidden_menu_container”

我想做什么-----

div“hidden_menu_opener”有一个背景图片，其页面加载时的不透明度为0.63，但在悬停时会变为完全不透明度（1）。如果“hidden_menu_container”可见，我希望图像保持完全不透明度

1 个答案:

答案 0 :(得分：0)

Answer 1

我认为你需要更新你的css和js以保持完全不透明度：

CSS：

.hidden_menu_opener {
     opacity: 0.63;
    background-color: orange;
    padding: 10px;
}
.hidden_menu_opener:hover, .hidden_menu_opener.active {
    opacity: 1;
}

JS：

$(document).ready(function () {
    var $hidden_menu_opener = $(".hidden_menu_opener");
    var $hidden_menu = $(".hidden_menu_container");
    $hidden_menu_opener.click(function () {
        $hidden_menu.toggle();
        $hidden_menu_opener.toggleClass('active');
    });
});
$(document).mouseup(function (e){
    var hidden_menu = $(".hidden_menu_container");
    if (!hidden_menu.is(e.target)&& hidden_menu.has(e.target).length === 0){
        hidden_menu.hide(1);
        $hidden_menu_opener.toggleClass('active');
    }
});

请您查看jsfiddle上的示例吗？

如何在javascript中打开子项时保留更改的图像

1 个答案: