Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

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

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

เริ่มหัวข้อใหม่

Kong

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

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

จากนั้นผมก็เขียน 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 เข้าไป

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

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

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

Tag : PHP, HTML/CSS, JavaScript, jQuery

Date : 2017-03-15 14:24:34

By : Pla2todkrob

View : 1319

Reply : 15

No. 1

tOm

โพสกระทู้ ( 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

Kong

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

ตอบความคิดเห็นที่ : 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 ถัดไปอยู่อีก

ผลที่ได้คือ

และเมื่อกดที่ Arrow ของ Submenu

ก่อนที่จะมาโพสนี้ผมก็ลองใช้กระบวนการคิดค่อนข้าง งง พอดี แต่ก็ไม่สำเร็จครับ

Date : 2017-03-16 11:27:28

By : Pla2todkrob

No. 3

tOm

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

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

ประวัติการแก้ไข
2017-03-16 12:22:16

Date : 2017-03-16 12:09:52

By : tomrambo

No. 4

Kong

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

ตอบความคิดเห็นที่ : 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

Kong

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

ขออนุญาตขุดกระทู้ครับ

Date : 2017-03-19 13:32:51

By : Pla2todkrob

No. 6

Luz

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

ตอบความคิดเห็นที่ : 5 เขียนโดย : Pla2todkrob เมื่อวันที่ 2017-03-19 13:32:51

รายละเอียดของการตอบ ::

เอามาโพสให้หมดครับ css html(ชื่อเมนูด้วย)

Date : 2017-03-19 14:19:46

By : Luz

No. 7

Promraungdet

โพสกระทู้ ( 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

Kong

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

ตอบความคิดเห็นที่ : 7 เขียนโดย : promraungdet เมื่อวันที่ 2017-03-19 16:14:35

รายละเอียดของการตอบ ::

เกือบใช่ครับ แต่ผมลองเล่นแล้ว

ผมอยากให้พอกด Menu 2 แล้ว Menu 1 หุบกลับด้วยครับ

Date : 2017-03-22 17:26:20

By : Pla2todkrob

No. 9

Kong

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

ตอบความคิดเห็นที่ : 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

Kong

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

อันนี้เป็น 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

Promraungdet

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

อัพเดทครับ ซ่อนอันที่เหลือให้แล้วครับ https://jsfiddle.net/meLfj906/42/

Date : 2017-03-23 18:49:24

By : promraungdet

No. 12

num

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

$(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

Kong

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

ตอบความคิดเห็นที่ : 11 เขียนโดย : promraungdet เมื่อวันที่ 2017-03-23 18:49:24

รายละเอียดของการตอบ ::

เหมือนจะซ่อนแค่ข้อความนะครับ ลูกศรยังค้างอยู่เลย

Date : 2017-03-24 18:52:41

By : Pla2todkrob

No. 14

Kong

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

ตอบความคิดเห็นที่ : 12 เขียนโดย : num เมื่อวันที่ 2017-03-23 22:41:28

รายละเอียดของการตอบ ::

โอ้ยยยย ได้แล้วครับ ขอบคุณมาก แค่เพิ่ม คำสั่งเดิมตาม level จบเลย

ขอบพระคุณมากกก #โลกหมุนรอบตัวเองมาตั้งนาน

Date : 2017-03-25 11:45:48

By : Pla2todkrob

No. 15

num

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

ประวัติการแก้ไข
2017-03-25 20:03:08

Date : 2017-03-25 20:02:37

By : num

ค้นหาข้อมูล

แสดงความคิดเห็น

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

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก