我想要一个Button，它会在HTML文件中下拉其他一些选项。我想从Android WebView访问此HTML。一切似乎都可以在PC浏览器上正常运行，但是每次在WebView中尝试时，它只会显示菜单栏的动画，但不会下拉无序列表。
这是在PC上的外观
.header{
background: #20211c;
}
.nav{
padding-top:10px;
}
nav ul{
position:absolute;
color:#29B08E;
margin:0;
padding:0;
width:wrap_content;
transform-origin:top;
transform: perspective(1000px) rotateX(-90deg);
transition:0.5s;
}
nav ul.active{
transform: perspective(1000px) rotateX(0deg);
}
nav ul li{
list-style:none;
color:white;
background-color: #29B08E;
}
.dropdown{
display: inline;
padding-right:10px;
}
nav ul li a{
display: block;
color:white;
padding: 10px;
text-align: center;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.2);
}
.inhalt{
color:white;
}
.uberschrift{
color:#CB4048;
}
button{
font-family:tahoma;
color:white;
position:relative;
width:wrap_content;
height:wrap_content;
front-size:24px;
background:#20211c;
border: 2px;
border-color:white;
box-shadow: none;
outline: none;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: white;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}<DOCTYPE !html>
<html>
<head>
<meta charset="UTF-8">
<link rel = "stylesheet" href="style.css" type="text/css">
<body>
<nav>
<button>
<div class="container" onclick="myFunction(this)">
<p><strong>Menü</p>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script> function myFunction(x){
x.classList.toggle("change");
}
</script></button>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("nav ul").toggleClass("active");});});
</script>
</nav>
</body>
</head>
</html>但是正如我所说，在移动设备上它只是动画。
Android Studio代码：
public class MainActivity extends AppCompatActivity {
WebView webView;
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String indexhtml ="file:///android_asset/index.html";
webView = (WebView) this.findViewById(R.id.wv_webview);
webView.setWebViewClient(new WebViewClient()
{
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
{
Log.i("WebView", "Attempting to load URL: " + url);
view.loadUrl(url);
return true;
}
});
WebSettings websetting = webView.getSettings();
websetting.setJavaScriptEnabled(true);
websetting.getJavaScriptCanOpenWindowsAutomatically();
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl(indexhtml);
}
}
我自己解决了，必须通过AndroidManifest.xml授予对android应用的访问权限。
通过在AndroidManifest.xml中添加<uses-permission android:name="android.permission.INTERNET"/>来解决