Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > พอดีผมเขียน script ในกด addClass removeClass แต่ไม่รู้ว่าทำผิดหลักการใดๆหรือเปล่า



 

พอดีผมเขียน script ในกด addClass removeClass แต่ไม่รู้ว่าทำผิดหลักการใดๆหรือเปล่า

 



Topic : 126826



โพสกระทู้ ( 204 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook



เริ่มที่ผมเขียน CSS Class ให้กับ Arrow เมนู
ได้หน้าตาแบบนี้

4

จากนั้นผมก็เขียน script ในการ addClass removeClass

Code (JavaScript)
$("ul.mobilemenu li span.head").click(function(){
			if ($(this).hasClass("active")){
				$(this).removeClass("active");
			}
			else {
				$(this).addClass("active");
				if ($("ul.mobilemenu li ul").css("display")=="none")
				{
					$(this).removeClass("active");
				};
			};
			
		});


พอกดที่ Arrow ทางขวาก็จะ addClass active เข้าไป

1

คือสามารถใช้งานได้ แต่ติดปัญหาตรงที่ เมื่อผมไม่ได้กดซ้ำไปที่ Arrow เดิมเพื่อให้ removeClass
แต่ผมไปกดที่ เมนูอื่นแทน

2

กลายเป็นว่า เมนูใหม่ที่กดนั้น addClass ไปที่ Arrow แต่ไม่ removeClass ที่ Arrow ตัวเก่า
พอผมไปกดที่ Arrow ตัวเก่าเพื่อให้มัน removeClass SubMenu ก็ toggle ลงมาแล้วมันกด removeClass

3

ตามภาพเลยครับ
ไม่ทราบว่าข้อมูลเท่านี้เพียงพอต่อการวิเคราะห์หรือเปล่าครับ



Tag : PHP, HTML/CSS, JavaScript, jQuery






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2017-03-15 14:24:34 By : Pla2todkrob View : 1374 Reply : 15
 

 

No. 1



โพสกระทู้ ( 738 )
บทความ ( 0 )



สถานะออฟไลน์


ถ้ามีโค้ด HTML ให้ดูด้วยน่าจะแนะได้ถูกต้องและแม่นยำมากกว่านี้ในการ element selector นะครับ

ผมว่าเขียนแค่นี้ก็พอครับ ถ้ามันไม่ทำงานก็ลองเปลี่ยน selector เอานะครับ

$("ul.mobilemenu li span.head").click(function(){
        $("ul.mobilemenu li span.head").removeClass("active");
        $(this).toggleClass('active');		
});






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-15 23:25:49 By : tomrambo
 


 

No. 2



โพสกระทู้ ( 204 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 1 เขียนโดย : tomrambo เมื่อวันที่ 2017-03-15 23:25:49
รายละเอียดของการตอบ ::
ผมลองใช้คำสั่งนี้ดูแล้วครับ ใช้งานได้ เมื่อคลิก arrow ก็ addClass active ไปยัง this
พอกดที่ arrow อื่นก็ removeClass active ทั้งหมดออกแล้ว addClass active ไปยัง this

แต่พอมากดที่ arrow เดิม เพื่อ removeClass active กลับไม่ removeClass ครับ

ผมจะนำแนวคิดนี้มาดัดแปลง
ได้มาแบบนี้ครับ

Code (PHP)
$("ul.mobilemenu li span.head").click(function(){
			if ($(this).hasClass("active"))
			{
				$("ul.mobilemenu li span.head").removeClass("active");
			}
			else
			{
				$("ul.mobilemenu li span.head").removeClass("active");
				$(this).addClass("active");
			}
		});



ซึ่งมัน work ตามความต้องการครับ
แต่ปัญหายังไม่จบครับ ที่ PRODUCT -> มันยังมี Sub Menu ที่มี Class head เพื่อเรียก Sub menu level ถัดไปอยู่อีก

ผลที่ได้คือ
1
และเมื่อกดที่ Arrow ของ Submenu
2

ก่อนที่จะมาโพสนี้ผมก็ลองใช้กระบวนการคิดค่อนข้าง งง พอดี แต่ก็ไม่สำเร็จครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-16 11:27:28 By : Pla2todkrob
 

 

No. 3



โพสกระทู้ ( 738 )
บทความ ( 0 )



สถานะออฟไลน์


แปะโค้ด html มาให้ทดสอบหน่อยครับ พอมองวิธีแก้ได้ละ เดี๋ยวคืนนี้มาตอบครับ


ประวัติการแก้ไข
2017-03-16 12:22:16
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-16 12:09:52 By : tomrambo
 


 

No. 4



โพสกระทู้ ( 204 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 3 เขียนโดย : tomrambo เมื่อวันที่ 2017-03-16 12:09:52
รายละเอียดของการตอบ ::
Code (PHP)
<ul class="mobilemenu nav-collapse collapse">
	<li class="level0 nav-1 parent">
		<a href=""></a>
		<ul class="level0">
			<li class="level1">
				<a href=""></a>
			</li>
		</ul>
		<span class="head"></span>
	</li>
	<li class="level0 nav-2 parent">
		<a href=""></a>
		<ul class="level0">
			<li class="level1">
				<a href=""></a>
			</li>
		</ul>
		<span class="head"></span>
	</li>
	<li class="level0 nav-3 parent">
		<a href=""></a>
		<ul class="level0">
			<li class="level1">
				<a href=""></a>
				<ul class="level1">
					<li class="level2">
						<a href=""></a>
					</li>
				</ul>
				<span class="head"></span>
			</li>
		</ul>
		<span class="head"></span>
	</li>
</ul>



ประมาณนี้ครับ จริงๆแล้วมี li ถึง class="level3"


ประวัติการแก้ไข
2017-03-17 09:49:04
2017-03-17 09:50:19
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-17 09:45:55 By : Pla2todkrob
 


 

No. 5



โพสกระทู้ ( 204 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ขออนุญาตขุดกระทู้ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-19 13:32:51 By : Pla2todkrob
 


 

No. 6



โพสกระทู้ ( 328 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 5 เขียนโดย : Pla2todkrob เมื่อวันที่ 2017-03-19 13:32:51
รายละเอียดของการตอบ ::
เอามาโพสให้หมดครับ css html(ชื่อเมนูด้วย)

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-19 14:19:46 By : Luz
 


 

No. 7



โพสกระทู้ ( 68 )
บทความ ( 0 )



สถานะออฟไลน์


https://jsfiddle.net/meLfj906/35/

แก้ไขใหม่ : https://jsfiddle.net/meLfj906/40/

ประมาณนี้หรือป่าวครับ


ประวัติการแก้ไข
2017-03-19 16:16:50
2017-03-19 16:25:26
2017-03-19 16:26:17
2017-03-19 18:36:04
2017-03-19 18:47:23
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-19 16:14:35 By : promraungdet
 


 

No. 8



โพสกระทู้ ( 204 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 7 เขียนโดย : promraungdet เมื่อวันที่ 2017-03-19 16:14:35
รายละเอียดของการตอบ ::
เกือบใช่ครับ แต่ผมลองเล่นแล้ว
ๅ
ผมอยากให้พอกด Menu 2 แล้ว Menu 1 หุบกลับด้วยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-22 17:26:20 By : Pla2todkrob
 


 

No. 9



โพสกระทู้ ( 204 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 6 เขียนโดย : Luz เมื่อวันที่ 2017-03-19 14:19:46
รายละเอียดของการตอบ ::
ผมก็อยากทำแบบนั้นอยู่เหมือนกันครับพี่
แต่มันติดตรงที่ ผมมาแก้เว็บเก่าของเค้า ซึ่งใช้ Magento ทำขึ้นมา ปล้วปัญหาหลักเลยคือผมไล่หาไฟล์ค่อนข้างลำบากเพราะทางบริษัทไม่มีข้อมูลอะไรให้เลย แล้วตัวผมเองก็ไม่เคยจับ Magento มาก่อนด้วย

http://lifeford.dcash-mcic.com/

จริงๆก็ไม่อยากจะเปิดเผยซักเท่าไหร่ แต่คงต้องยอมเลยครับ รบกวนเข้าเว็บแล้วแล้วดูโค้ด view mobile เลยได้ไหมครับ

Menu ที่เป็ฯปัญหาเลยก็คือ PRODUCT


ประวัติการแก้ไข
2017-03-22 17:35:04
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-22 17:33:35 By : Pla2todkrob
 


 

No. 10



โพสกระทู้ ( 204 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

อันนี้เป็น CSS ครับ
Code (PHP)
.navbar-inner ul.mobilemenu {
		position:relative;
		display:inline-block;
		line-height:1;
		margin:0 2%;
		width:96%;
	}
	ul.mobilemenu li.level0 {
		padding:4px 0;
		border-bottom:solid #eee 1px;
		width: 100%;
		display: inline-block;
		position:relative;
		line-height:1;
	}
	ul.mobilemenu li.level0 a {
		color:#000;
		float:left;
		display: inline-block;
	}
	
	ul.mobilemenu li span.head {
		float:right;
		display: inline-block;
		position:absolute;
		top:8px;
		right:0;
		width:0;
		height:0;
		border-left:12px solid #999;
		border-bottom:6px solid transparent;
		border-top:6px solid transparent;
		transition:0.5s;
	}
	ul.mobilemenu li span.head.active{
		transform: rotate(450deg);
	}
	ul.mobilemenu li.level0 ul {
		position: relative;
		top: 100%;
		margin:0 auto;
		width:calc(100% - 16px);
		display:none;
	}
	ul.mobilemenu li.level0 ul li {
		padding:4px 0;
		width: 100%;
		display: inline-block;
		position:relative;
		line-height:0;
	}
	ul.mobilemenu li.level0 ul li a {
		color:#000;
		float:left;
		display: inline-block;
		text-transform:uppercase;
	}
	ul.mobilemenu li.level0 a {
		font-size:1.2em;
	}
	ul.mobilemenu li.level1 a {
		font-size:1.1em;
	}
	ul.mobilemenu li.level2 a {
		font-size:1em;
	}
	ul.mobilemenu li.level3 a {
		font-size:1em;
	}


ส่วน HTML ที่พอจะแกะได้
เรียกด้วย
Code (PHP)
<div class="header-nav">
			<?php echo $this->getChildHtml('topMenu') ?>
		</div>

อันนี้คือภายใน <?php echo $this->getChildHtml('topMenu') ?> แล้วก็ไปต่อไม่ได้แล้วครับ
Code (PHP)
<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
<?php if(count($_categories)): 
?>


<div class="nav-mobile-container hidden-desktop">
    <div class="nav-container">
        <div class="nav-contain-size">
            <div class="navbar">
                <div id="navbar-inner" class="navbar-inner navbar-inactive">
            
                    <ul id="mobilemenu" class="mobilemenu nav-collapse collapse">
                        <?php echo $_menu ?>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

ส่วน SCRIPT
Code (JavaScript)
$(document).ready(function(){
		if ($("ul.mobilemenu li.level0").hasClass("active"))
		{
			$("ul.mobilemenu li.level0.active span").addClass("active");
		}

		$("ul.mobilemenu li.level0 span").click(function(){
			if ($(this).hasClass("active"))
			{
				$(this).removeClass("active");
			}
			else
			{
				$("ul.mobilemenu li.level0 span").removeClass("active");
				$(this).addClass("active");
			}
		});
		
	});


หมดใส้หมดพุงเท่านี้ครับ


ประวัติการแก้ไข
2017-03-22 17:45:07
2017-03-22 17:46:41
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-22 17:42:08 By : Pla2todkrob
 


 

No. 11



โพสกระทู้ ( 68 )
บทความ ( 0 )



สถานะออฟไลน์


อัพเดทครับ ซ่อนอันที่เหลือให้แล้วครับ https://jsfiddle.net/meLfj906/42/
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-23 18:49:24 By : promraungdet
 


 

No. 12



โพสกระทู้ ( 1,463 )
บทความ ( 1 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Blogger 

$(document).ready(function(){

		$("ul.mobilemenu li.level0 > span").click(function(){
			if ($(this).hasClass("active"))
			{
				$(this).removeClass("active");
			}
			else
			{
				$("ul.mobilemenu li.level0 > span").removeClass("active");
				$(this).addClass("active");
			}
		});

		$("ul.mobilemenu li.level1 > span").click(function(){
			if ($(this).hasClass("active"))
			{
				$(this).removeClass("active");
			}
			else
			{
				$("ul.mobilemenu li.level1 > span").removeClass("active");
				$(this).addClass("active");
			}
		});

});


แบบนี้ได้ไหมครับ :)
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-23 22:41:28 By : num
 


 

No. 13



โพสกระทู้ ( 204 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 11 เขียนโดย : promraungdet เมื่อวันที่ 2017-03-23 18:49:24
รายละเอียดของการตอบ ::
เหมือนจะซ่อนแค่ข้อความนะครับ ลูกศรยังค้างอยู่เลย
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-24 18:52:41 By : Pla2todkrob
 


 

No. 14



โพสกระทู้ ( 204 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 12 เขียนโดย : num เมื่อวันที่ 2017-03-23 22:41:28
รายละเอียดของการตอบ ::
โอ้ยยยย ได้แล้วครับ ขอบคุณมาก แค่เพิ่ม คำสั่งเดิมตาม level จบเลย

ขอบพระคุณมากกก #โลกหมุนรอบตัวเองมาตั้งนาน
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-25 11:45:48 By : Pla2todkrob
 


 

No. 15



โพสกระทู้ ( 1,463 )
บทความ ( 1 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Blogger




ประวัติการแก้ไข
2017-03-25 20:03:08
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-25 20:02:37 By : num
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : พอดีผมเขียน script ในกด addClass removeClass แต่ไม่รู้ว่าทำผิดหลักการใดๆหรือเปล่า
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่