Question

我是jquery的新手。我有两个with tempCounts as( SELECT enrollment_id, COUNT(progress_tracker) as countValue FROM progress_tracker WHERE progress_tracker.completed = TRUE group by enrollment_id) SELECT enrollments.*, users.*,tempCounts.countValue FROM enrollments, users.*,tempCounts INNER JOIN users ON enrollments.user_id = users.id WHERE enrollments.preview = FALSE and enrollments.id = tempCounts.enrollment_id ORDER BY tempCounts.countValue标记，其类为p和.angle_up。

.angle_down班级有angle_up个班级。在点击active时，从.angle_down移除.active课程并设置为angle_up。

在课程.angle_down时，必须显示带有动画效果的ele。喜欢切换。如何实现这一目标。提前谢谢。

＆＃13;

active

＆＃13;

 $(document).on("click", ".angle_up", function () {
        $(this).removeClass("active");
        var angledwn = $('.angle_down');
        angledwn.addClass("active");
        var ele = $('.ele');
        ele.toggle('5000');
    });

＆＃13;

.angle_up, .angle_down{
    color: #0096C9;
    display: none;
}
.angle_up.active, .angle_down.active{
    color: #0096C9;
    cursor: pointer;
    display: block;
}

＆＃13;

Answer 1

你的html中有输入错误。类为angle_up而不是angle.up。

为您的.angle和.angle_up添加一个额外的公共课.angle_down，并将该类用作点击事件的选择器。

$(document).on("click", ".angle", function () {
        var angledwn = $('.angle').not('.active');
        $(this).removeClass("active");
        angledwn.addClass("active");
        var ele = $('.ele');
        ele.toggle('5000');
    });

.angle_up, .angle_down{
    color: #0096C9;
    display: none;
}
.angle_up.active, .angle_down.active{
    color: #0096C9;
    cursor: pointer;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="angle angle_up active">First</p>
<p class="angle angle_down"> Second</p>
<p class="ele">To hide to display</p>

Answer 2

你不需要逐个选择元素来实现这个，只需通过标签p选择并使用.not（）在未被点击的P元素上添加类。

＆＃13;

$(document).on("click", "p", function () {
        $(this).removeClass("active");
        $("p").not(this).addClass("active");
        var ele = $('.ele');
        ele.toggle('5000');
    });

＆＃13;

.angle_up, .angle_down{
    color: #0096C9;
    display: none;
}
.angle_up.active, .angle_down.active{
    color: #0096C9;
    cursor: pointer;
    display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="angle_up active">First</p>

<p class="angle_down"> Second</p>



<p class="ele">To hide to display</p>

＆＃13;

P.S：<p class="angle up active">First</p>

你需要纠正它，它应该是

 <p class="angle_up active">First</p>

你在班级名称中缺少_

隐藏和显示元素onclick

2 个答案: