Question

我遇到一些JavaScript的问题：对于网站的计算机版本，当我将鼠标悬停在按钮上时，会显示一些文字，当我点击网站上的任何其他位置时，文字会隐藏。

我不知道如何为同一网站的移动版本构建一个页面，当我点击一个按钮时，会出现文本，当我点击其他任何地方时，我希望文本隐藏。我试过了：

if(jQuery.browser.mobile)  {
    $(".button").on("click", function()  {
        $(".text").show();
    });
    //this section doesn't work
    $("body").on("click", function()  {
        $(".text").hide();
    });
}
else  {
    //desktop code here, irrelevant
}

Answer 1

您的代码存在冲突，因为class是body的一部分。因此，当您单击class时，将调用这两个事件。

本文中的信息将帮助您解决问题：
How do I detect a click outside an element?

在event.stopPropagation();事件中使用class，您应该能够区分这两个事件。
请注意，如果您的类元素或其包含的任何元素处理其他事件，此解决方案可能会引发其他问题。在这种情况下，您可能希望尝试我引用的帖子中的其他解决方案。

我不认为你在移动版上工作是相关的。

Answer 2

在jQuery 1.9中删除了

jQuery.browser.mobile。检查您正在使用的版本。

如果这很繁琐，只需将代码修改为：

if(jQuery.browser.mobile)  {
    alert("Mobile detected.");
}

然后在手机上测试它，你应该收到警报。如果你没有，那么要么使用较旧的jQuery版本，要么使用不同的移动检测方法（mobile-detect.js，也许？）。

如果有效，请继续：

您发布的代码显示或隐藏名为＆＃34; class＆＃34;的内容。这不完全正确。

如果在您的HTML中，您已宣布一个类为class 的元素（这不是很好的做法，恕我直言），请使用{{1 }}

.class

如果您已声明ID为<button class="class">TEXTTEXTTEXT</button> $(".class").show(); （再次）的元素，请使用class。

#class

否则，如果您只声明了一个元素，例如按钮，或者您想要控制该类型的所有元素，请使用＆＃34; elementname＆＃34;，例如＆＃ 34;按钮＆＃34;

<button id="class">TEXTTEXTTEXT</button>
$("#class").show();

jQuery的元素选择遵循类似CSS规则的模式，其中ID跟随<button>TEXTTEXTTEXT</button> $("button").show();，类跟随'#'，元素名称按原样使用。

如果仍然无效，请发布您的HTML代码。

移动版网站点击并隐藏

2 个答案: