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() {

Jquery点击事件未被触发

2 个答案: