jQuery Click事件未触发

Question

一直试图在我的网站页面上执行DIV隐藏显示。

用普通的javascript可以正常工作，但是注意到在移动设备上模拟时它不能工作..经过一番研究，我将代码更改为以下代码，这有什么问题吗？

<script>
    $(document).ready(function() {
        var portfolioDiv = document.getElementById('portfolio');
        var resultsDiv = document.getElementById('results');

        var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
        var resultsBtn = document.getElementById('RenderResults_Btn');
        //portfolioBtn.onclick = function () resultsBtn.onclick = function ()
        $('#portfolioBtn').on('click touchstart', function() {
            resultsDiv.setAttribute('class', 'col-md-9 hidden');
            portfolioDiv.setAttribute('class', 'col-md-9 visible');
        });

        $('#resultsBtn').on('click touchstart', function() {
            portfolioDiv.setAttribute('class', 'col-md-9 hidden');
            resultsDiv.setAttribute('class', 'col-md-9 visible');
        });
    });
</script>

这是我的导航栏堆栈，其中两个选项充当按钮

<div class="col-md-3 col-sm-12 col-xs-12">
    <br />
    <ul class="nav nav-stacked">
        <li style="background-color: lightgreen ; color:black;font-weight:bold"><a href="#" id="RenderPortfolio_Btn">Introduction</a>
        </li>
        <li style="background-color: lightgreen; color:black;font-weight:bold"><a href="#" id="RenderResults_Btn">Key Achievements</a>
        </li>
    </ul>
</div>

Answer 1

您的代码缺少click和touchstart之间的逗号，并且您的ID选择器不正确

 $('#RenderPortfolio_Btn').on('click, touchstart', function() {
            resultsDiv.setAttribute('class', 'col-md-9 hidden');
            portfolioDiv.setAttribute('class', 'col-md-9 visible');
        });

Answer 2

您将引用元素的变量与按ID选择的jQuery选择器混淆了。 本质上，您可以删除以下几行：

var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
var resultsBtn = document.getElementById('RenderResults_Btn');

然后将您的jQuery选择器更改为：

$('#RenderPortfolio_Btn').on('click touchstart', function() {

和

$('#RenderResults_Btn').on('click touchstart', function() {