Question

DROP MENU LINK jsfiddle.net/a3MKG/83 /

请参阅上面的链接。有没有人知道如何在点击时更改导航图像？一旦我点击它，我希望它成为一个不同的图像（X的图片）。

注意：当您单击导航图标时，下拉菜单会关闭，您可以单击下拉菜单外的任何位置以重新启动下拉菜单，这样您就不必单击X图像删除下拉并恢复初始图像。因此，当下拉菜单主动显示时，我只需将新的导航图像设为X.

任何帮助将不胜感激！谢谢大家。

Answer 1

好的，所以我看到了你的评论。＆＃39;如何在关闭图像时关闭它？在我做小提琴之前。

我将你的div dropTitle更改为a并在其中添加了另一个类menu-open

.menu-open{   background:url('http://webservices.lib.harvard.edu/hlportal/images/threeline.png');
     background-size:100% 100%;
}

并添加了一个用＆＃39;关闭＆＃39;

切换的功能

$('a').click(function(){
   $(this).toggleClass('close')
});


.close{background:url('https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png');
    background-size:100% 100%;
}

我将你的dropTitle类略微调整为

.dropTitle{
  display:block;
    width:50px;
    height:50px;
  cursor:pointer;
}

但功能保持不变

Answer 2

不要在可以使用css的地方使用javascript！

# No () after the type of a1
# Also, see comment, better to parameterize function, use concrete type for Dict
function convertToVector{T<:AbstractString}(a1::Dict{T, Int64})
    # This is how you create an empty vector to hold Family objects
    A = Vector{Family}()
    for k in sort(collect(keys(a1)))
        # The values passed to the Family constructor were backwards
        push!(A, Family(k, a1[k]))
    end
    A
end

input, input:before, input:after {
  display: block;
  content:'';
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width:20px;
  background:black;
  height:4px;
  border-radius:2px;
  transition: all linear 0.1s;
}
input:after{
  top:3px;
}
input:before{
  top:-7px;
}
input:focus:after{
  transform: rotate(45deg);
  top:-4px;
}
input:focus{
  background:transparent;
}
input:focus:before{
  transform: rotate(-45deg);
  top:0px;
}
input:not(:focus) + div{
  display:none;
}

下拉：点击时交换图标

2 个答案: