最近在寫html，寫了一個(gè)自定義選項(xiàng)卡，兩級(jí)菜單聯(lián)動(dòng)，作為初學(xué)者，代碼比較亂，句釋什么的沒怎么仔細(xì)寫，大家將就看吧：（ 簡(jiǎn)書不支持html標(biāo)簽編輯@ ~ @）
樣式：
*{padding: 0;margin: 0;}
body{
background-color:#D3D3D3;
}
.top,.top_menu{
background-color:white ;
color: black;
padding:10px 10px 15px;
margin:15px 5px;
}
.middle{
display: none;
background-color:white ;
color: black;
margin:15px 5px;
padding:5px 15px? 20px;
}
.money button,.top_menu button{
margin: 10px 0.8%;
width: 22%;
height: 30px;
background-color: white;
border: 1px solid lightgrey;
}
.middleDetail{
width: 30px;
margin: 10px 20%;
}
#pointOut{
color: darkorange;
padding: 15px;
}
#bottom{
width: 50%;
height: 50px;
margin:0 20%;
background-color: orange;
font-size:20px ;
color: white;
}
.money .active{
color: orange;
border: 1px solid orange;
background-color: white;
}
.middie_menu li{
list-style-type: none;
}
.money_input{
/*background-color: red;*/
margin: 10px;
text-align: center;
}
.money_input input{
width: 50%;
/*background-color: blue;*/
margin: 5px;
text-align: center;
line-height: 20px;
}
.hidden{
display: none;
}
body：簡(jiǎn)書不支持html，就用圖片代替了~~
javaScript：
var index=0;
var money=0;
var chargeWayIndex=0;
$(document).ready(function()
{
//點(diǎn)擊確定按鈕，獲取菜單參數(shù)
$("#bottom").click(function()
{
var y =? $(".menu_btn");
console.log($(".menu_btn"));
console.log($(".btn .active"));
console.log(y[chargeWayIndex]);
var btn = y[chargeWayIndex];
console.log(btn.innerHTML);
var x = $(".btn");
console.log(x);
console.log("index:"+index);
console.log("chargeWayIndex:"+chargeWayIndex);
console.log(x[index]);
var indexy = index + chargeWayIndex*4;
console.log(indexy);
var xhtml = x[indexy].innerHTML;
console.log(xhtml);
console.log(xhtml.substring(0,xhtml.length-1));
});
// 二級(jí)菜單點(diǎn)擊事件
$(".btn").on("click",function(){
$(this).addClass("active").siblings().removeClass("active");
var sbtitle=$(".middle");
if($(this).index() == "3"){//判斷是否點(diǎn)擊了自定義
if(sbtitle.length){
sbtitle.show();
}
}else{
sbtitle.hide();
}
index = $(this).index();
});
});
//以及菜單點(diǎn)擊事件
$(".menu_btn").on("click",function(){
$(this).addClass("active").siblings().removeClass("active");
var sbtitle=$(".top");
chargeWayIndex? = $(this).index();
//alert(chargeWayIndex);
// $(".btn").removeClass("active");
showtopmenu(chargeWayIndex);
});
//改變?nèi)?jí)菜單自定義選項(xiàng)卡
function showtopmenu(i){
//以下三行代碼不能少，會(huì)出現(xiàn)BUG
$(".top").hide();
$(".middle").hide();
$(".btn").removeClass("active");
switch(i){
case 0:
//alert("電量");
var visible = $("#chagerWay1");
visible.show();
// document.getElementsByClassName("middleTitle").innerHTML = "自定義充電金額";
$(".middleTitle").html("自定義充電金額");
$("#middle_input_span").html("元");
break;
case 1:
//alert("時(shí)間");
// $("middleTitle").innerText="自定義充電時(shí)長(zhǎng)";
var visible = $("#chagerWay2");
visible.show();
// document.getElementsByClassName("middleTitle").val = "自定義充電時(shí)長(zhǎng)";
var a = document.getElementById("middleTitle");
$(".middleTitle").html("自定義充電時(shí)長(zhǎng)");
$("#middle_input_span").html("小時(shí)");
break;
case 2:
//alert("電量");
var visible = $("#chagerWay3");
visible.show();
// document.getElementsByClassName("middleTitle").innerHTML = "自定義充電電量";
$(".middleTitle").html("自定義充電電量");
$("#middle_input_span").html("度");
break;
default:
//alert("充滿");
var visible = $("#chagerWay4");
visible.show();
var sbtitle=$(".middle");
sbtitle.hide();
break;
}
}
效果圖：
