Question

这就是我想要的。有许多单词，例如test1，test2，test3，......并且每个单词都与一个或多个示例相关联。我想并排显示这些单词，并在相关单词被点击时显示示例＆＃34;起初，我写的如下（mouseover事件），但我意识到它在移动环境中不起作用。所以我需要改变我的计划。我想在用户点击单词时发生操作。

https://jsfiddle.net/kyubyong/umxf19vo/

HTML

<a>test1</a>
<div class="divs">
    <li>This is the example of test1</li>
</div>

<a>test2</a>
<div class="divs">
    <li>This is the example of test3</li>
</div>

<a>test3></a>
<div class="divs">
    <li>This is the example of test3</li>
</div>

CSS

a:hover
{
    background-color: lightgray;
}

.divs 
{
  display: none;
}

a:hover + .divs 
{
    display: block;
    position: absolute;
    background-color: lightgray;
    width: 100%;
    padding: 5px;
}

Answer 1

看起来您之后的事件是click事件。

我不认为这可以在你的jsfiddle示例中仅使用css来完成，但它当然可以使用javascript完成。

这是使用jQuery接近它的一种方法：

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

请参阅https://jsfiddle.net/fznL3c9L/

上的工作示例

Answer 2

尝试使用JavaScript隐藏/显示系统。

HTML：

<a href="#" onclick="return show1()">test1</a>
<div id="show1" style="display:none">
    //display info
</div>

JavaScript的：

function show1() {
    document.getElementById("show1").style.display="block";
    return false;
}

然后使用你已经拥有的Div CSS，它应该对你有用，如果你想要隐藏它，你将需要有另一个按钮或更复杂的if语句。

Answer 3

请尝试此

单靠CSS无法实现这一点。所以我尝试添加一些jQuery。

jQuery的：

$(document).ready(function(){
    $("a").click(function(){
        $(this).next('div').toggleClass("testClass");
    });
})

CSS：

.testClass
{
    display: block;
    position: absolute;
    background-color: lightgray;
    width: 100%;
    padding: 5px;
}

DEMO

或

HTML：

<a onClick="showDivs(this)">

jQuery的：

function showDivs(currentElem){ $(currentElem).next('div').toggleClass("testClass"); }

Answer 4

HAHAHAHA

var i = $("nav > ul > li").length;
        for (var j = 0; j < i; j++) {
            a(j);
        };
        function a (j) {
            $('nav > ul > li').eq(j%i).click(function() {
                $('nav > ul > li > ul').eq(j%i).css('display', 'block');
            });
            $('nav > ul > li').eq(j%i).mouseout(function() {
                $('nav > ul > li > ul').eq(j%i).css('display', 'none');
            });
        }

nav > ul > li{
        float: left;
        padding: 5px;
    }
    nav > ul > li > ul{
        padding: 0;
        display: none;
    }
    li{
        display: block;
    }
    nav > ul > li:hover{
        background-color: #ffff00;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav>
    <ul>
        <li>nav1
            <ul>
                <li>aaa1</li>
            </ul>
        </li>
        <li>nav2
            <ul>
                <li>bbb1</li>
                <li>bbb2</li>
            </ul>
        </li>
        <li>nav3
            <ul>
                <li>ccc1</li>
                <li>ccc2</li>
                <li>ccc3</li>
            </ul>
        </li>
        <li>nav4
            <ul>
                <li>ddd1</li>
            </ul>
        </li>
    </ul>
</nav>

如何将鼠标悬停事件更改为onclick？

4 个答案: