javascript – Das Klickereignis von ul's li nach dem Einzug steht im Konflikt mit dem Auszugsereignis

Question

Wie im Bild gezeigt: Der Effekt, den ich möchte, ist, dass sich die Farbe beim Verschieben des Li von ul in Rot und beim Verschieben in Blau ändert.
Aber wenn ein bestimmtes Li ausgewählt ist (das heißt). , angeklickt), ich hoffe, dass dieses Li so lange bleibt, bis das nächste Li angeklickt wird. Es ist rot. Auch wenn die Maus erneut darüber fährt und das Entfernungsereignis ausgelöst wird, muss es immer noch rot bleiben, bis ein anderes Li angeklickt wird.

Das Folgende ist mein Code. Der Effekt dieses Codes kann nur sein, dass die Farbe nach dem Klicken, wenn das Li herausgezogen wird, blau bleibt. Wenn das angeklickte Li jedoch hinein- und herausgezogen wird, bleibt seine Farbe nicht erhalten rot und wird blau.

Kann mir jemand bei der Lösung helfen =-= Vielen Dank im Voraus

<ul class="h1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    $('.h1 li').mouseenter(function(){
        $(this).css({"background":"red"})
        $(this).on("click",function(){
            $('.h1 li').css({"background":"blue"})
            $(this).css({"background":"red"})
            $(this).mouseleave(function(){
                $(this).css({"background":"red"})
            })
        })
    }).mouseleave(function(){
        $(this).css({"background":"blue"})
    })
</script>

Answer 1

css的位置改变一下，就能达到效果。不信你试试。DEMO我后面有空写一个。

js只是区分你单击的是那个

Answer 2

目测可以利用样式优先级，点击的时候添加的类加!important，移入的时候添加的另一个类优先级比点击的时候添加的低~

Answer 3

css

.h1 li {
    background-color: blue;
}
.h1 li:hover{
    background-color: red;
}
.chosen {
    background-color: red!important;
}

js:

$('.h1 li').click(function() {
    $('.h1 li').removeClass('chosen');
    $(this).addClass('chosen');
})

Answer 4

谢邀.

HTML:

<ul class="h1">
    <li class="bl">1</li>
    <li class="bl">2</li>
    <li class="bl">3</li>
    <li class="bl">4</li>
    <li class="bl">5</li>
</ul>

CSS:

.bl {
    background-color: blue;
}
.bl:hover{
    background-color: red;
}
.clk {
    background-color: red;
}

JavaScript:

$('.h1>li').click(function() {
    $('.clk').removeClass('clk').addClass('bl');
    $(this).removeClass('bl').addClass('clk');
})

这样？