我有一个代码，将鼠标悬停在按钮上，显示一些信息，但在移动设备上，当您点击仅在移动设备上显示的按钮时，我需要它来显示信息，但我无法制作桌面脚本停止。我在这里为您提供桌面代码。
这是一张图片，解释了我想要完成的任务。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap - Prebuilt Layout</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="style-buttons.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style+="overflow:hidden;" >
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 border">
<p>SERVICIOS DISPONIBLES</p>
<hr>
<p class="subtitle"> Elija la opción con la que desea comenzar a trabajar: </p>
</div>
<div class="col-xs-0 col-sm-0 col-md-4 col-lg-4 border"> </div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 border">
<button class="btn-success border" href="#" style="color: #ffffff; border-radius: 5px; border-color: transparent; font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, 'sans-serif'; width: 400px; float: right;vertical-align: middle;">¡SUSCRÍBETE! </button>
</div>
</div>
<div class="row" style="margin-top:20px;" >
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
<button id="myPill1" class="button-pill">
<a href="#">
<img src="../icons/icons_svg/user_admin.svg" class="img-responsive icon" alt="Administración de usuarios"/>
<p class="btn-text" >Administración<br>de Usuarios</p></a></button>
<div class="show-info" type="button"><span> Más Información <i class="material-icons">more_horiz</i></span></div>
<p id="info1">Administración de Usuarios para Gobiernos y Observatorios Ciudadanos</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
<button id="myPill2" class="button-pill">
<a href="#">
<img src="../icons/icons_svg/eye.svg" class="img-responsive icon" alt="Diagnostico Individual"/>
<p class="btn-text">Diagnostico<br>Individual</p></a></button>
<div class="show-info" type="button"><span> Más Información <i class="material-icons">more_horiz</i></span></div>
<p id="info2">Realiza la evaluación sobre tu Percepción acerca del estado del Gobierno conforme a las necesidades mínimas que debe de proveer para el desarrollo del territorio, obteniendo reportes de tecnología, de financiamiento y otros estándares o políticas de desarrollo.</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
<button id="myPill3" class="button-pill">
<a href="#">
<img src="../icons/icons_svg/dialogue.svg" class="img-responsive icon" alt="Consulta de la Opinión Ciudadana"/>
<p class="btn-text">Consulta de la Opinión Ciudadana</p></a></button>
<div class="show-info" type="button"><span> Más Información <i class="material-icons">more_horiz</i></span></div>
<p id="info3">Seguimiento a la percepción ciudadana de acuerdo a las necesidades mínimas de los mismos.</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
<button id="myPill4" class="button-pill">
<a href="#">
<img src="../icons/icons_svg/diagnosis.svg" class="img-responsive icon" alt="Ejercicios de Autodiagnostico de Gobierno"/>
<p class="btn-text">Ejercicios de autodiagnóstico <br> de gobierno</p></a></button>
<div class="show-info" type="button"><span> Más Información <i class="material-icons">more_horiz</i></span></div>
<p id="info4">Evaluación de la Percepción Gubernamental dentro de un grupo de Colaboradores, analisis preliminar sobre la percepción del gobierno por parte de la Autoridad del mismo.</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
<button id="myPill5" class="button-pill">
<a href="#">
<img src="../icons/icons_svg/sheet.svg" class="img-responsive icon" alt="Propuestas Ciudadanas"/>
<p class="btn-text">Propuestas Ciudadanas</p></a></button>
<div class="show-info" type="button"><span> Más Información <i class="material-icons">more_horiz</i></span></div>
<p id="info5">Seguimiento a las propuestas que los ciudadanos han realizado para la mejora de su ciudad.</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
<button id="myPill6" class="button-pill">
<a href="#">
<img src="../icons/icons_svg/search_sheet.svg" class="img-responsive icon" alt="Verificación Gubernamental"/>
<p class="btn-text">Verificación Gubernamental</p></a>
</button>
<div class="show-info" type="button"><span> Más Información <i class="material-icons">more_horiz</i></span></div>
<p id="info6">Revisión detallada de un Gobierno para verificar con evidencias el estado del mismo y poder formular un plan de acción para mejora.</p>
</div>
</div> <!---END FIRST ROW --->
<div class="row"> <!-----SECOND ROW START--->
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
<button id="myPill7" class="button-pill">
<a href="#">
<img src="../icons/icons_svg/information.svg" class="img-responsive icon" alt="Transparencia Proactiva en su Localidad"/>
<p class="btn-text">Transparencia Proactiva en su Localidad</p></a></button>
<div class="show-info" type="button"><span> Más Información <i class="material-icons">more_horiz</i></span></div>
<p id="info7">Conozca la información pública disponible de su Gobierno conforme a las necesidades Ciudadanas con un enfoque de Gobierno Abierto.</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
<button id="myPill8" class="button-pill">
<a href="#">
<img src="../icons/icons_svg/tree.svg" class="img-responsive icon" alt="Consulta el Plan de Desarrollo Gubernamental"/>
<p class="btn-text">Consulta el Plan de Desarrollo Gubernamental</p></a></button>
<div class="show-info" type="button"><span> Más Información <i class="material-icons">more_horiz</i></span></div>
<p id="info8">Seguimiento al Plan de Desarrollo Gubernamental con las acciones, programas y políticas públicas basado en las necesidades ciudadanas.</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
<button id="myPill9" class="button-pill">
<a href="#">
<img src="../icons/icons_svg/bus.svg" class="img-responsive icon" alt="Servicios Publicos en tu Localidad"/>
<p class="btn-text">Servicios Publicos en tu Localidad</p></a>
</button>
<div class="show-info" type="button"><span> Más Información <i class="material-icons">more_horiz</i></span></div>
<p id="info9">Conozca la información y estado de los servicios públicos en su localidad, permitiendo acceder al detalle del responsable de proporcionar el mismo.</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
<button id="myPill10" class="button-pill">
<a href="#">
<img src="../icons/icons_svg/alert.svg" class="img-responsive icon" alt="Seguimiento a Incidencias Ciudadanas"/>
<p class="btn-text">Seguimiento a Incidencias Ciudadanas</p></a></button>
<div class="show-info" onClick="myFunction()" type="button"><span> Más Información <i class="material-icons">more_horiz</i></span></div>
<p id="info10">Seguimiento a los reportes de Atención Ciudadana conforme a las necesidades y estado de las mismas.</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
<button id="myPill11" class="button-pill">
<a href="#">
<img src="../icons/icons_svg/search_sheet.svg" class="img-responsive icon" alt="Consulta los Diagnósticos Asignados al Partner"/>
<p class="btn-text">Consulta los Diagnósticos Asignados al Partner</p></a></button>
<div class="show-info" type="button"><span> Más Información <i class="material-icons">more_horiz</i></span></div>
<p id="info11" class="animate">Revisión detallada de los diagnósticos que tiene relación el partner</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
<button class="button-pill" id="button-evalua">
<a href="#">
<img src="../icons/icons_svg/evalua.png" class="img-responsive icon" alt="EVALUA TU GOBIERNO ¡AHORA!"/>
<p class="btn-text">EVALÚA TU GOBIERNO <b>¡AHORA!</b></p>
</a>
</button>
</div>
</div> <!---END SECOND ROW--->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 border">
<p>EVALUACIONES DE AUTODIAGNOSTICO</p>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-0 col-xs-0"></div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<table class="table table-responsive">
<thead class="thead-inverse">
<tr>
<th>LOCALIDAD</th>
<th>PAÍS</th>
<th>FECHA</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>7/28/2015 10:55:47 PM</td>
<td><button class="btn-report"><p>Ver Reporte</p></button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-0 col-xs-0"></div>
</div>
<script>
window.onload = function () {
document.getElementById("info1").style.display = 'none';
document.getElementById("info2").style.display = 'none';
document.getElementById("info3").style.display = 'none';
document.getElementById("info4").style.display = 'none';
document.getElementById("info5").style.display = 'none';
document.getElementById("info6").style.display = 'none';
document.getElementById("info7").style.display = 'none';
document.getElementById("info8").style.display = 'none';
document.getElementById("info9").style.display = 'none';
document.getElementById("info10").style.display = 'none';
document.getElementById("info11").style.display = 'none';
};
document.getElementById("myPill1").addEventListener("mouseover", function buttons(){
document.getElementById("info1").style.display = "block";
});
document.getElementById("myPill1").addEventListener("mouseout", function buttons(){
document.getElementById("info1").style.display = "none";
});
document.getElementById("myPill2").addEventListener("mouseover", function buttons(){
document.getElementById("info2").style.display = "block";
});
document.getElementById("myPill2").addEventListener("mouseout", function buttons(){
document.getElementById("info2").style.display = "none";
});
document.getElementById("myPill3").addEventListener("mouseover", function buttons(){
document.getElementById("info3").style.display = "block";
});
document.getElementById("myPill3").addEventListener("mouseout", function buttons(){
document.getElementById("info3").style.display = "none";
});
document.getElementById("myPill4").addEventListener("mouseover", function buttons(){
document.getElementById("info4").style.display = "block";
});
document.getElementById("myPill4").addEventListener("mouseout", function buttons(){
document.getElementById("info4").style.display = "none";
});
document.getElementById("myPill5").addEventListener("mouseover", function buttons(){
document.getElementById("info5").style.display = "block";
});
document.getElementById("myPill5").addEventListener("mouseout", function buttons(){
document.getElementById("info5").style.display = "none";
});
document.getElementById("myPill6").addEventListener("mouseover", function buttons(){
document.getElementById("info6").style.display = "block";
});
document.getElementById("myPill6").addEventListener("mouseout", function buttons(){
document.getElementById("info6").style.display = "none";
});
document.getElementById("myPill7").addEventListener("mouseover", function buttons(){
document.getElementById("info7").style.display = "block";
});
document.getElementById("myPill7").addEventListener("mouseout", function buttons(){
document.getElementById("info7").style.display = "none";
});
document.getElementById("myPill8").addEventListener("mouseover", function buttons(){
document.getElementById("info8").style.display = "block";
});
document.getElementById("myPill8").addEventListener("mouseout", function buttons(){
document.getElementById("info8").style.display = "none";
});
document.getElementById("myPill9").addEventListener("mouseover", function buttons(){
document.getElementById("info9").style.display = "block";
});
document.getElementById("myPill9").addEventListener("mouseout", function buttons(){
document.getElementById("info9").style.display = "none";
});
document.getElementById("myPill10").addEventListener("mouseover", function buttons(){
document.getElementById("info10").style.display = "block";
});
document.getElementById("myPill10").addEventListener("mouseout", function buttons(){
document.getElementById("info10").style.display = "none";
});
document.getElementById("myPill11").addEventListener("mouseover", function buttons(){
document.getElementById("info11").style.display = "block";
});
document.getElementById("myPill11").addEventListener("mouseout", function buttons(){
document.getElementById("info11").style.display = "none";
});
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
非常感谢你
答案 0 :(得分：0)
这可能会有所帮助
var vw = $(document).width();
$("#your-button").click(function() {
if( vw <= 767 ) {
// Your click info on mobile code goes here
// It will only work less than 768px
}
});